@datametria/vue-components 2.4.1 → 2.4.2

package/src/components/DatametriaFileUpload.vue

@@ -1,418 +1,497 @@
-<template>
-  <div class="dm-file-upload" :class="{ 'dm-file-upload--disabled': disabled, 'dm-file-upload--loading': loading }">
-    <div
-      class="dm-file-upload__area"
-      :class="{ 'dm-file-upload__area--dragover': isDragOver }"
-      @click="triggerFileInput"
-      @drop="handleDrop"
-      @dragover="handleDragOver"
-      @dragenter="handleDragEnter"
-      @dragleave="handleDragLeave"
-    >
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="dm-file-upload__input"
-        :accept="accept"
-        :multiple="multiple"
-        :disabled="disabled"
-        @change="handleFileSelect"
-      />
-      
-      <div v-if="loading" class="dm-file-upload__spinner"></div>
-      
-      <div v-else class="dm-file-upload__content">
-        <div class="dm-file-upload__icon">
-          <svg viewBox="0 0 24 24" fill="currentColor">
-            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
-          </svg>
-        </div>
-        
-        <div class="dm-file-upload__text">
-          <p class="dm-file-upload__primary-text">
-            {{ uploadText || 'Click to upload or drag and drop' }}
-          </p>
-          <p class="dm-file-upload__secondary-text">
-            {{ accept ? `Supported formats: ${accept}` : 'All file types supported' }}
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="progress !== undefined" class="dm-file-upload__progress">
-      <div class="dm-file-upload__progress-track">
-        <div
-          class="dm-file-upload__progress-bar"
-          :style="{ width: `${progress}%` }"
-        ></div>
-      </div>
-      <span class="dm-file-upload__progress-text">{{ progress }}%</span>
-    </div>
-
-    <div v-if="selectedFiles.length > 0" class="dm-file-upload__files">
-      <div
-        v-for="(file, index) in selectedFiles"
-        :key="`${file.name}-${index}`"
-        class="dm-file-upload__file"
-      >
-        <div class="dm-file-upload__file-info">
-          <span class="dm-file-upload__file-name">{{ file.name }}</span>
-          <span class="dm-file-upload__file-size">{{ formatFileSize(file.size) }}</span>
-        </div>
-        <button
-          type="button"
-          class="dm-file-upload__remove"
-          @click="removeFile(index)"
-        >
-          ×
-        </button>
-      </div>
-    </div>
-
-    <div v-if="computedError" class="dm-file-upload__error">
-      {{ computedError }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-
-interface Props {
-  modelValue?: File | File[]
-  accept?: string
-  multiple?: boolean
-  maxSize?: number // in bytes
-  maxFiles?: number
-  disabled?: boolean
-  loading?: boolean
-  progress?: number
-  uploadText?: string
-  error?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  multiple: false,
-  disabled: false,
-  loading: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: File | File[]]
-  'file-added': [file: File]
-  'file-removed': [file: File, index: number]
-}>()
-
-const fileInputRef = ref<HTMLInputElement>()
-const isDragOver = ref(false)
-const selectedFiles = ref<File[]>([])
-const validationError = ref('')
-
-const computedError = computed(() => props.error || validationError.value)
-
-const triggerFileInput = () => {
-  if (!props.disabled && fileInputRef.value) {
-    fileInputRef.value.click()
-  }
-}
-
-const handleFileSelect = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (target.files) {
-    processFiles(Array.from(target.files))
-  }
-}
-
-const handleDrop = (event: DragEvent) => {
-  event.preventDefault()
-  isDragOver.value = false
-  
-  if (props.disabled) return
-  
-  const files = event.dataTransfer?.files
-  if (files) {
-    processFiles(Array.from(files))
-  }
-}
-
-const handleDragOver = (event: DragEvent) => {
-  event.preventDefault()
-}
-
-const handleDragEnter = (event: DragEvent) => {
-  event.preventDefault()
-  if (!props.disabled) {
-    isDragOver.value = true
-  }
-}
-
-const handleDragLeave = (event: DragEvent) => {
-  event.preventDefault()
-  // Only set to false if we're leaving the drop area entirely
-  if (!(event.currentTarget as Element)?.contains(event.relatedTarget as Node)) {
-    isDragOver.value = false
-  }
-}
-
-const processFiles = (files: File[]) => {
-  validationError.value = ''
-  
-  // Validate file types
-  if (props.accept) {
-    const acceptedTypes = props.accept.split(',').map(type => type.trim())
-    const invalidFiles = files.filter(file => {
-      return !acceptedTypes.some(type => {
-        if (type.startsWith('.')) {
-          return file.name.toLowerCase().endsWith(type.toLowerCase())
-        }
-        return file.type.match(type.replace('*', '.*'))
-      })
-    })
-    
-    if (invalidFiles.length > 0) {
-      validationError.value = `Invalid file type(s): ${invalidFiles.map(f => f.name).join(', ')}`
-      return
-    }
-  }
-  
-  // Validate file sizes
-  if (props.maxSize) {
-    const oversizedFiles = files.filter(file => file.size > props.maxSize!)
-    if (oversizedFiles.length > 0) {
-      validationError.value = `File(s) too large: ${oversizedFiles.map(f => f.name).join(', ')}`
-      return
-    }
-  }
-  
-  // Validate number of files
-  if (props.multiple) {
-    const totalFiles = selectedFiles.value.length + files.length
-    if (props.maxFiles && totalFiles > props.maxFiles) {
-      validationError.value = `Maximum ${props.maxFiles} files allowed`
-      return
-    }
-    
-    selectedFiles.value.push(...files)
-    emit('update:modelValue', selectedFiles.value)
-  } else {
-    selectedFiles.value = [files[0]]
-    emit('update:modelValue', files[0])
-  }
-  
-  // Emit file-added events
-  files.forEach(file => {
-    emit('file-added', file)
-  })
-}
-
-const removeFile = (index: number) => {
-  const removedFile = selectedFiles.value[index]
-  selectedFiles.value.splice(index, 1)
-  
-  if (props.multiple) {
-    emit('update:modelValue', selectedFiles.value)
-  } else {
-    emit('update:modelValue', selectedFiles.value[0] || null)
-  }
-  
-  emit('file-removed', removedFile, index)
-}
-
-const formatFileSize = (bytes: number): string => {
-  if (bytes === 0) return '0 Bytes'
-  
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-</script>
-
-<style scoped>
-.dm-file-upload {
-  width: 100%;
-}
-
-.dm-file-upload--disabled {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.dm-file-upload--loading {
-  opacity: 0.8;
-}
-
-.dm-file-upload__area {
-  border: 2px dashed var(--dm-border-color, #d1d5db);
-  border-radius: var(--dm-radius-lg, 0.5rem);
-  padding: 2rem;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  background-color: var(--dm-bg-secondary, #f9fafb);
-}
-
-.dm-file-upload__area:hover {
-  border-color: var(--dm-primary, #0072ce);
-  background-color: var(--dm-bg-hover, #f3f4f6);
-}
-
-.dm-file-upload__area--dragover {
-  border-color: var(--dm-primary, #0072ce);
-  background-color: rgba(0, 114, 206, 0.05);
-}
-
-.dm-file-upload__input {
-  display: none;
-}
-
-.dm-file-upload__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.dm-file-upload__icon {
-  width: 3rem;
-  height: 3rem;
-  color: var(--dm-text-secondary, #9ca3af);
-}
-
-.dm-file-upload__icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.dm-file-upload__text {
-  text-align: center;
-}
-
-.dm-file-upload__primary-text {
-  font-size: 1.125rem;
-  font-weight: 500;
-  color: var(--dm-text-primary, #374151);
-  margin: 0 0 0.5rem 0;
-}
-
-.dm-file-upload__secondary-text {
-  font-size: 0.875rem;
-  color: var(--dm-text-secondary, #6b7280);
-  margin: 0;
-}
-
-.dm-file-upload__spinner {
-  width: 2rem;
-  height: 2rem;
-  border: 3px solid var(--dm-border-color, #d1d5db);
-  border-top: 3px solid var(--dm-primary, #0072ce);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.dm-file-upload__progress {
-  margin-top: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.dm-file-upload__progress-track {
-  flex: 1;
-  height: 0.5rem;
-  background-color: var(--dm-bg-secondary, #e5e7eb);
-  border-radius: var(--dm-radius-full, 9999px);
-  overflow: hidden;
-}
-
-.dm-file-upload__progress-bar {
-  height: 100%;
-  background-color: var(--dm-primary, #0072ce);
-  transition: width 0.3s ease;
-}
-
-.dm-file-upload__progress-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--dm-text-secondary, #4b5563);
-  min-width: 3rem;
-}
-
-.dm-file-upload__files {
-  margin-top: 1rem;
-  space-y: 0.5rem;
-}
-
-.dm-file-upload__file {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  background-color: var(--dm-bg-secondary, #f9fafb);
-  border: 1px solid var(--dm-border-color, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  margin-bottom: 0.5rem;
-}
-
-.dm-file-upload__file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.dm-file-upload__file-name {
-  font-weight: 500;
-  color: var(--dm-text-primary, #374151);
-}
-
-.dm-file-upload__file-size {
-  font-size: 0.875rem;
-  color: var(--dm-text-secondary, #6b7280);
-}
-
-.dm-file-upload__remove {
-  background: none;
-  border: none;
-  color: var(--dm-error, #ef4444);
-  cursor: pointer;
-  font-size: 1.25rem;
-  padding: 0.25rem;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: background-color 0.2s;
-}
-
-.dm-file-upload__remove:hover {
-  background-color: var(--dm-error, #ef4444);
-  color: white;
-}
-
-.dm-file-upload__error {
-  margin-top: 0.5rem;
-  color: var(--dm-error, #ef4444);
-  font-size: 0.875rem;
-}
-
-/* Dark Mode Support - Hybrid Approach */
-
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .dm-file-upload {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
+<template>
+  <div class="datametria-file-upload" :class="uploadClasses">
+    <label v-if="label" :for="uploadId" class="datametria-file-upload__label">
+      {{ label }}
+      <span v-if="required" class="datametria-file-upload__required">*</span>
+    </label>
+
+    <div
+      class="datametria-file-upload__area"
+      :class="{ 'is-dragover': isDragOver }"
+      role="button"
+      :aria-label="uploadText || 'Upload de arquivo'"
+      :aria-disabled="disabled"
+      tabindex="0"
+      @click="triggerFileInput"
+      @keydown.enter.prevent="triggerFileInput"
+      @keydown.space.prevent="triggerFileInput"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragenter="handleDragEnter"
+      @dragleave="handleDragLeave"
+    >
+      <input
+        :id="uploadId"
+        ref="fileInputRef"
+        type="file"
+        class="datametria-file-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        :aria-label="label || uploadText"
+        :aria-required="required"
+        :aria-invalid="!!computedError"
+        :aria-describedby="computedError ? `${uploadId}-error` : undefined"
+        @change="handleFileSelect"
+      />
+      
+      <div v-if="loading" class="datametria-file-upload__spinner" role="status" aria-label="Carregando"></div>
+      
+      <div v-else class="datametria-file-upload__content">
+        <div class="datametria-file-upload__icon">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+          </svg>
+        </div>
+        
+        <div class="datametria-file-upload__text">
+          <p class="datametria-file-upload__primary-text">
+            {{ uploadText || 'Clique para enviar ou arraste e solte' }}
+          </p>
+          <p class="datametria-file-upload__secondary-text">
+            {{ accept ? `Formatos: ${accept}` : 'Todos os formatos' }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="progress !== undefined" class="datametria-file-upload__progress" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
+      <div class="datametria-file-upload__progress-track">
+        <div class="datametria-file-upload__progress-bar" :style="{ width: `${progress}%` }"></div>
+      </div>
+      <span class="datametria-file-upload__progress-text">{{ progress }}%</span>
+    </div>
+
+    <div v-if="selectedFiles.length > 0" class="datametria-file-upload__files">
+      <div v-for="(file, index) in selectedFiles" :key="`${file.name}-${index}`" class="datametria-file-upload__file">
+        <div class="datametria-file-upload__file-info">
+          <span class="datametria-file-upload__file-name">{{ file.name }}</span>
+          <span class="datametria-file-upload__file-size">{{ formatFileSize(file.size) }}</span>
+        </div>
+        <button type="button" class="datametria-file-upload__remove" aria-label="Remover arquivo" @click="removeFile(index)">×</button>
+      </div>
+    </div>
+
+    <div v-if="computedError" :id="`${uploadId}-error`" role="alert" aria-live="polite" class="datametria-file-upload__error">
+      {{ computedError }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: File | File[]
+  accept?: string
+  multiple?: boolean
+  maxSize?: number
+  maxFiles?: number
+  disabled?: boolean
+  loading?: boolean
+  progress?: number
+  uploadText?: string
+  error?: string
+  label?: string
+  required?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  multiple: false,
+  disabled: false,
+  loading: false,
+  required: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File | File[]]
+  'file-added': [file: File]
+  'file-removed': [file: File, index: number]
+}>()
+
+const { trackEvent } = useAnalytics()
+const fileInputRef = ref<HTMLInputElement>()
+const isDragOver = ref(false)
+const selectedFiles = ref<File[]>([])
+const validationError = ref('')
+const uploadId = `datametria-file-upload-${Math.random().toString(36).substr(2, 9)}`
+
+const uploadClasses = computed(() => ({
+  'is-disabled': props.disabled,
+  'is-loading': props.loading,
+  'is-error': !!computedError.value,
+  [`datametria-file-upload--${props.size}`]: true
+}))
+
+const computedError = computed(() => props.error || validationError.value)
+
+const triggerFileInput = () => {
+  if (!props.disabled && fileInputRef.value) {
+    fileInputRef.value.click()
+  }
+}
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files) {
+    processFiles(Array.from(target.files))
+  }
+}
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault()
+  isDragOver.value = false
+  if (props.disabled) return
+  const files = event.dataTransfer?.files
+  if (files) {
+    processFiles(Array.from(files))
+  }
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault()
+  if (!props.disabled) {
+    isDragOver.value = true
+  }
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault()
+  if (!(event.currentTarget as Element)?.contains(event.relatedTarget as Node)) {
+    isDragOver.value = false
+  }
+}
+
+const processFiles = (files: File[]) => {
+  validationError.value = ''
+  
+  if (props.accept) {
+    const acceptedTypes = props.accept.split(',').map(type => type.trim())
+    const invalidFiles = files.filter(file => {
+      return !acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase())
+        }
+        return file.type.match(type.replace('*', '.*'))
+      })
+    })
+    if (invalidFiles.length > 0) {
+      validationError.value = `Tipo inválido: ${invalidFiles.map(f => f.name).join(', ')}`
+      return
+    }
   }
+  
+  if (props.maxSize) {
+    const oversizedFiles = files.filter(file => file.size > props.maxSize!)
+    if (oversizedFiles.length > 0) {
+      validationError.value = `Arquivo muito grande: ${oversizedFiles.map(f => f.name).join(', ')}`
+      return
+    }
+  }
+  
+  if (props.multiple) {
+    const totalFiles = selectedFiles.value.length + files.length
+    if (props.maxFiles && totalFiles > props.maxFiles) {
+      validationError.value = `Máximo ${props.maxFiles} arquivos`
+      return
+    }
+    selectedFiles.value.push(...files)
+    emit('update:modelValue', selectedFiles.value)
+  } else {
+    selectedFiles.value = [files[0]]
+    emit('update:modelValue', files[0])
+  }
+  
+  files.forEach(file => {
+    emit('file-added', file)
+    trackEvent('file_upload_added', {
+      component: 'DatametriaFileUpload',
+      fileName: file.name,
+      fileSize: file.size,
+      fileType: file.type
+    })
+  })
+}
+
+const removeFile = (index: number) => {
+  const removedFile = selectedFiles.value[index]
+  selectedFiles.value.splice(index, 1)
+  
+  if (props.multiple) {
+    emit('update:modelValue', selectedFiles.value)
+  } else {
+    emit('update:modelValue', selectedFiles.value[0] || null)
+  }
+  
+  emit('file-removed', removedFile, index)
+  trackEvent('file_upload_removed', {
+    component: 'DatametriaFileUpload',
+    fileName: removedFile.name
+  })
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+</script>
+
+<style scoped>
+.datametria-file-upload {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.datametria-file-upload__label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-file-upload__required {
+  color: var(--color-error, #ef4444);
+}
+
+.datametria-file-upload.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.datametria-file-upload__area {
+  border: 2px dashed var(--color-border, #d1d5db);
+  border-radius: 6px;
+  padding: 32px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: var(--color-background-alt, #f9fafb);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  min-height: 44px;
+}
+
+.datametria-file-upload__area:hover {
+  border-color: var(--color-primary, #3b82f6);
+  background-color: var(--color-background-muted, #f3f4f6);
+}
+
+.datametria-file-upload__area:focus-visible {
+  outline: none;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.datametria-file-upload__area.is-dragover {
+  border-color: var(--color-primary, #3b82f6);
+  background-color: var(--color-primary-alpha, rgba(59, 130, 246, 0.05));
+}
+
+.datametria-file-upload__input {
+  display: none;
+}
+
+.datametria-file-upload__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.datametria-file-upload__icon {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-file-upload__primary-text {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+  margin: 0 0 8px 0;
+}
+
+.datametria-file-upload__secondary-text {
+  font-size: 14px;
+  color: var(--color-text-secondary, #6b7280);
+  margin: 0;
+}
+
+.datametria-file-upload__spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--color-border, #d1d5db);
+  border-top: 3px solid var(--color-primary, #3b82f6);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.datametria-file-upload__progress {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.datametria-file-upload__progress-track {
+  flex: 1;
+  height: 8px;
+  background-color: var(--color-background-muted, #e5e7eb);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.datametria-file-upload__progress-bar {
+  height: 100%;
+  background-color: var(--color-primary, #3b82f6);
+  transition: width 0.3s;
+}
+
+.datametria-file-upload__progress-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-secondary, #6b7280);
+  min-width: 48px;
+}
+
+.datametria-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.datametria-file-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: var(--color-background-alt, #f9fafb);
+  border-radius: 6px;
+  border: 1px solid var(--color-border, #d1d5db);
+}
+
+.datametria-file-upload__file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.datametria-file-upload__file-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-file-upload__file-size {
+  font-size: 12px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-file-upload__remove {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--color-text-secondary, #6b7280);
+  cursor: pointer;
+  padding: 8px;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+}
+
+.datametria-file-upload__remove:hover {
+  color: var(--color-error, #ef4444);
+}
+
+.datametria-file-upload__error {
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+/* Tamanhos */
+.datametria-file-upload--xs .datametria-file-upload__area {
+  padding: 16px;
+}
+
+.datametria-file-upload--xs .datametria-file-upload__icon {
+  width: 32px;
+  height: 32px;
+}
+
+.datametria-file-upload--xs .datametria-file-upload__primary-text {
+  font-size: 14px;
+}
+
+.datametria-file-upload--sm .datametria-file-upload__area {
+  padding: 24px;
+}
+
+.datametria-file-upload--sm .datametria-file-upload__icon {
+  width: 40px;
+  height: 40px;
+}
+
+.datametria-file-upload--sm .datametria-file-upload__primary-text {
+  font-size: 16px;
+}
+
+.datametria-file-upload--md .datametria-file-upload__area {
+  padding: 32px;
 }
 
-/* Controle manual via useTheme() */
-[data-theme="dark"] .dm-file-upload {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
+.datametria-file-upload--md .datametria-file-upload__icon {
+  width: 48px;
+  height: 48px;
+}
+
+.datametria-file-upload--lg .datametria-file-upload__area {
+  padding: 40px;
+}
+
+.datametria-file-upload--lg .datametria-file-upload__icon {
+  width: 56px;
+  height: 56px;
+}
+
+.datametria-file-upload--lg .datametria-file-upload__primary-text {
+  font-size: 20px;
+}
+
+.datametria-file-upload--xl .datametria-file-upload__area {
+  padding: 48px;
+}
+
+.datametria-file-upload--xl .datametria-file-upload__icon {
+  width: 64px;
+  height: 64px;
+}
+
+.datametria-file-upload--xl .datametria-file-upload__primary-text {
+  font-size: 22px;
+}
+
+@media (max-width: 640px) {
+  .datametria-file-upload__area {
+    padding: 24px;
+    min-height: 48px;
+  }
 }
-</style>
+</style>