uifolio 0.5.1 → 0.5.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uifolio",
-  "version": "0.5.1",
-  "description": "CLI qui copie des composants React (calendrier, lecteurs vidéo/audio, OTP, éditeur, upload) et leurs helpers dans ton projet, avec des tokens Tailwind CSS 4.",
+  "version": "0.5.3",
+  "description": "CLI that copies React components (calendar, video/audio players, OTP, editor, upload) and their helpers into your project, with Tailwind CSS 4 tokens.",
   "type": "module",
   "license": "MIT",
   "author": "Barronakn <jeanbarronalokpon@gmail.com>",

package/src/components/ui/calendar.tsx

@@ -199,7 +199,7 @@ export function Calendar({
             <>
               <label className="flex items-center gap-2 rounded-xl border bg-background/40 px-2.5 py-1.5 focus-within:ring-2 focus-within:ring-primary/40">
                 <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
-                <span className="sr-only">Début (jj/mm/aaaa)</span>
+                <span className="sr-only">Start (MM/DD/YYYY)</span>
                 <input
                   value={fromDraft}
                   onChange={(event) => setFromDraft(event.target.value)}
@@ -210,14 +210,14 @@ export function Calendar({
                       applyRange(fromDraft, toDraft)
                     }
                   }}
-                  placeholder="du jj/mm/aaaa"
+                  placeholder="from MM/DD/YYYY"
                   inputMode="numeric"
                   className="w-full bg-transparent text-xs tabular-nums outline-none placeholder:text-muted-foreground/60"
                 />
               </label>
               <label className="flex items-center gap-2 rounded-xl border bg-background/40 px-2.5 py-1.5 focus-within:ring-2 focus-within:ring-primary/40">
                 <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
-                <span className="sr-only">Fin (jj/mm/aaaa)</span>
+                <span className="sr-only">End (MM/DD/YYYY)</span>
                 <input
                   value={toDraft}
                   onChange={(event) => setToDraft(event.target.value)}
@@ -228,7 +228,7 @@ export function Calendar({
                       applyRange(fromDraft, toDraft)
                     }
                   }}
-                  placeholder="au jj/mm/aaaa"
+                  placeholder="to MM/DD/YYYY"
                   inputMode="numeric"
                   className="w-full bg-transparent text-xs tabular-nums outline-none placeholder:text-muted-foreground/60"
                 />
@@ -242,7 +242,7 @@ export function Calendar({
         <button
           type="button"
           onClick={() => setVisibleMonth((month) => addMonths(month, -1))}
-          aria-label="Mois précédent"
+          aria-label="Previous month"
           className="inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           <ChevronLeft className="size-4" />

package/src/components/ui/color-picker.tsx

@@ -296,7 +296,7 @@ export function ColorPicker({
           type="button"
           onClick={toggle}
           disabled={disabled}
-          aria-label="Ouvrir le sélecteur de couleur"
+          aria-label="Open the color picker"
           aria-haspopup="dialog"
           aria-expanded={isOpen}
           aria-controls={panelId}
@@ -336,7 +336,7 @@ export function ColorPicker({
             }}
             spellCheck={false}
             aria-invalid={invalid}
-            aria-label="Valeur de la couleur"
+            aria-label="Color value"
             placeholder={displayFormat === 'hex' ? '#10B981' : displayFormat === 'rgb' ? 'rgb(16, 185, 129)' : 'hsl(160, 84%, 39%)'}
             className={cn(
               'h-8 w-full rounded-sm border bg-background pl-10 pr-2 font-mono text-[10.5px] text-foreground outline-none transition placeholder:normal-case placeholder:text-muted-foreground/70 focus:border-primary/60 focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed',
@@ -349,8 +349,8 @@ export function ColorPicker({
           type="button"
           onClick={toggle}
           disabled={disabled}
-          aria-label="Personnaliser la couleur"
-          title="Personnaliser la couleur"
+          aria-label="Customize the color"
+          title="Customize the color"
           className={cn(
             'grid size-8 shrink-0 place-items-center rounded-sm border transition outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed',
             isOpen
@@ -372,7 +372,7 @@ export function ColorPicker({
             ref={panelRef}
             id={panelId}
             role="dialog"
-            aria-label="Sélecteur de couleur"
+            aria-label="Color picker"
             tabIndex={-1}
             style={{
               position: 'fixed',
@@ -386,7 +386,7 @@ export function ColorPicker({
           >
             <div className="flex items-start justify-between gap-3 border-b px-3.5 py-3">
               <div className="min-w-0">
-                <p className="text-[11px] font-semibold">Sélecteur de couleur</p>
+                <p className="text-[11px] font-semibold">Color picker</p>
                 <p className="mt-0.5 truncate font-mono text-[9.5px] uppercase tracking-wide text-muted-foreground">
                   {formatColor(current, 'hex', showAlpha)}
                 </p>
@@ -394,7 +394,7 @@ export function ColorPicker({
               <button
                 type="button"
                 onClick={close}
-                aria-label="Fermer le sélecteur de couleur"
+                aria-label="Close the color picker"
                 className="grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <X className="size-3.5" />
@@ -404,7 +404,7 @@ export function ColorPicker({
             <div className="space-y-3 p-3.5">
               <div
                 role="group"
-                aria-label="Saturation et luminosité"
+                aria-label="Saturation and luminance"
                 tabIndex={disabled ? -1 : 0}
                 onPointerDown={(event) => {
                   if (disabled) return
@@ -530,8 +530,8 @@ export function ColorPicker({
                     type="button"
                     disabled={disabled}
                     onClick={pickFromScreen}
-                    title="Prélever une couleur à l’écran"
-                    aria-label="Prélever une couleur à l’écran"
+                    title="Pick a color from the screen"
+                    aria-label="Pick a color from the screen"
                     className="inline-flex items-center gap-1.5 rounded-sm border border-border px-2 py-1 text-[9px] font-semibold uppercase tracking-[0.1em] text-muted-foreground transition hover:border-primary/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <Pipette className="size-3" />
@@ -614,7 +614,7 @@ export function ColorPicker({
 
               {checkerAlpha && (
                 <p className="text-[9px] leading-relaxed text-muted-foreground">
-                  La transparence est incluse dans la valeur exportée.
+                  The opacity is included in the exported value.
                 </p>
               )}
             </div>

package/src/components/ui/command-menu.tsx

@@ -34,7 +34,7 @@ export function CommandMenu({
   defaultOpen = false,
   onOpenChange,
   placeholder = 'Rechercher une commande…',
-  emptyText = 'Aucun résultat.',
+  emptyText = 'No result.',
   emptyState,
   className,
 }: Readonly<CommandMenuProps>) {

package/src/components/ui/file-upload.tsx

@@ -14,7 +14,7 @@ export interface UploadItem {
   progress: number
   status: UploadStatus
   error?: string
-  /** URL publique renvoyée par l'uploader (upload réel). */
+  /** Public URL returned by the uploader (real upload). */
   url?: string
 }
 
@@ -23,7 +23,7 @@ export interface FileUploadProps {
   multiple?: boolean
   maxSizeMb?: number
   maxFiles?: number
-  /** Renvoie l'URL publique du fichier (upload réel) ou void. */
+  /** Returns the public file URL (real upload) or void. */
   uploader?: (file: File, onProgress: (value: number) => void) => Promise<string | void>
   onChange?: (items: UploadItem[]) => void
   className?: string
@@ -142,11 +142,11 @@ export function FileUpload({
     for (const file of files) {
       if (accepted.length >= slots) break
       if (file.size > maxSizeMb * 1024 * 1024) {
-        errors.push(`${file.name} dépasse ${maxSizeMb} Mo`)
+        errors.push(`${file.name} exceeds ${maxSizeMb} MB`)
         continue
       }
       if (accept && !matchesAccept(file, accept)) {
-        errors.push(`${file.name} n'est pas un type accepté`)
+        errors.push(`${file.name} is not an accepted type`)
         continue
       }
       accepted.push(file)
@@ -218,10 +218,10 @@ export function FileUpload({
           <Upload className="size-5" />
         </span>
         <span className="text-sm font-medium">
-          {dragging ? 'Dépose ici' : 'Glisse tes fichiers ou clique'}
+          {dragging ? 'Drop here' : 'Drag your files or click'}
         </span>
         <span className="max-w-xs text-[11px] leading-relaxed text-muted-foreground">
-          {accept ? accept.replaceAll(',', ' · ') : 'Tous types'} — jusqu'à {maxSizeMb} Mo
+          {accept ? accept.replaceAll(',', ' · ') : 'All types'} — up to {maxSizeMb} MB
           {multiple ? ` · ${maxFiles} fichiers` : ''}
         </span>
         <input
@@ -302,9 +302,9 @@ export function FileUpload({
                   href={item.url}
                   target={item.url ? '_blank' : undefined}
                   rel="noreferrer"
-                  title={item.url ?? 'Envoyé'}
+                  title={item.url ?? 'Uploaded'}
                   className="grid size-7 shrink-0 place-items-center rounded-md text-emerald-400 transition hover:bg-emerald-400/10"
-                  aria-label={item.url ? `Ouvrir ${item.file.name}` : 'Envoyé'}
+                  aria-label={item.url ? `Open ${item.file.name}` : 'Uploaded'}
                 >
                   <Check className="size-4" />
                 </a>
@@ -313,7 +313,7 @@ export function FileUpload({
                 <button
                   type="button"
                   onClick={() => retry(item)}
-                  aria-label="Réessayer"
+                  aria-label="Retry"
                   className="grid size-7 place-items-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
                 >
                   <RotateCcw className="size-3.5" />

package/src/components/ui/icon-picker.tsx

@@ -158,7 +158,7 @@ export function IconGlyph({
   const [prevIcon, setPrevIcon] = useState(icon)
   const loadRef = useRef<Promise<void> | null>(null)
 
-  // Ajustement pendant le rendu : une icône déjà en cache s'applique sans effet.
+  // Render-time adjustment: an icon already cached is applied with no effect.
   if (prevIcon !== icon) {
     setPrevIcon(icon)
     setData(iconCache.get(icon) ?? null)
@@ -184,7 +184,7 @@ export function IconPicker({
   value,
   color = 'var(--primary)',
   onChange,
-  placeholder = 'Choisir une icône',
+  placeholder = 'Choose an icon',
   className,
 }: Readonly<IconPickerProps>) {
   const [open, setOpen] = useState(false)
@@ -206,7 +206,7 @@ export function IconPicker({
           `https://api.iconify.design/search?query=${encodeURIComponent(q)}&limit=96&prefixes=${SEARCH_PREFIXES}`,
           { signal: controller.signal },
         )
-        if (!res.ok) throw new Error('Erreur lors de la recherche des icônes')
+        if (!res.ok) throw new Error('Error while searching icons')
         const data: IconSearchResponse = await res.json()
         setIcons(data.icons ?? [])
       } catch (err) {
@@ -270,12 +270,12 @@ export function IconPicker({
       {/* Picker */}
       {open && (
         <div className="absolute left-0 top-full z-50 mt-2 w-full overflow-hidden rounded-xl border border-border bg-card shadow-xl">
-          {/* En-tête */}
+          {/* Header */}
           <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <div>
-              <p className="text-sm font-medium text-foreground">Choisir une icône</p>
+              <p className="text-sm font-medium text-foreground">Choose an icon</p>
               <p className="text-xs text-muted-foreground">
-                Recherchez parmi des milliers d'icônes
+                Search among thousands of icons
               </p>
             </div>
             <button
@@ -305,7 +305,7 @@ export function IconPicker({
             </div>
           </div>
 
-          {/* Liste d'icônes */}
+          {/* Icon list */}
           <div className="max-h-36 overflow-y-auto p-3">
             {loading ? (
               <div className="grid grid-cols-[repeat(auto-fill,minmax(2.5rem,1fr))] gap-2">
@@ -349,7 +349,7 @@ export function IconPicker({
               <div className="flex flex-col items-center justify-center py-6 text-center">
                 <Search size={26} className="mb-2 text-muted-foreground/50" />
                 <p className="text-sm font-medium text-muted-foreground">
-                  Aucune icône trouvée
+                  No icon found
                 </p>
                 <p className="mt-1 text-xs text-muted-foreground/70">
                   Essayez un autre terme

package/src/components/ui/resizable.tsx

@@ -183,7 +183,7 @@ export function ResizableHandle({ className }: Readonly<{ className?: string }>)
       }}
       className={cn('group/handle relative shrink-0 outline-none', className)}
     >
-      <span className="sr-only">Utilise les flèches pour redimensionner</span>
+      <span className="sr-only">Use the arrows to resize</span>
     </div>
   )
 }

package/src/components/ui/rich-text-editor.tsx

@@ -143,14 +143,14 @@ export function RichTextEditor({
             <Italic className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Souligné"
+            label="Underline"
             active={active.underline}
             onClick={() => exec('underline')}
           >
             <Underline className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Barré"
+            label="Strikethrough"
             active={active.strikeThrough}
             onClick={() => exec('strikeThrough')}
           >
@@ -182,14 +182,14 @@ export function RichTextEditor({
           <Divider />
 
           <ToolButton
-            label="Liste à puces"
+            label="Bullet list"
             active={active.insertUnorderedList}
             onClick={() => exec('insertUnorderedList')}
           >
             <List className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Liste numérotée"
+            label="Numbered list"
             active={active.insertOrderedList}
             onClick={() => exec('insertOrderedList')}
           >
@@ -204,7 +204,7 @@ export function RichTextEditor({
           <ToolButton label="Annuler" onClick={() => exec('undo')}>
             <Undo2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Rétablir" onClick={() => exec('redo')}>
+          <ToolButton label="Redo" onClick={() => exec('redo')}>
             <Redo2 className="size-3.5" />
           </ToolButton>
           <ToolButton label="Effacer la mise en forme" onClick={() => exec('removeFormat')}>

package/src/components/ui/stories.tsx

@@ -51,7 +51,7 @@ export function Stories({
   const setOpen = useCallback(
     (next: boolean) => {
       if (next) {
-        // Réinitialise la lecture à l'ouverture plutôt que par un effet.
+        // Restarts playback at open rather than via an effect.
         elapsedRef.current = 0
         setPaused(false)
       }
@@ -204,7 +204,7 @@ export function Stories({
             )}
             <div className="min-w-0 flex-1">
               <p className="truncate text-xs font-medium text-white">{item.title ?? 'Stories'}</p>
-              <p className="text-[10px] text-white/55">à l'instant</p>
+              <p className="text-[10px] text-white/55">now</p>
             </div>
             <button
               type="button"