🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.

resources/views/flux/file-upload/dropzone/index.blade.php

@@ -0,0 +1,79 @@
+@blaze
+
+@props([
+    'icon' => 'cloud-arrow-up',
+    'withProgress' => false,
+    'inline' => false,
+    'heading' => null,
+    'text' => null,
+    'size' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('w-full')
+    ->add($inline ? 'p-4 ps-4 sm:ps-5 pe-6 sm:pe-8' : 'py-5 px-6 sm:py-10 sm:px-16')
+    ->add($inline ? 'flex items-center' : 'flex flex-col items-center justify-center')
+    ->add('rounded-lg border-dashed border-zinc-200 dark:border-white/10')
+    ->add($inline ? 'border-1' : 'border-2')
+    ->add('bg-zinc-50 dark:bg-white/10 transition-colors')
+    ->add('in-data-dragging:bg-zinc-100 in-data-dragging:border-zinc-300')
+    ->add('dark:in-data-dragging:bg-white/15 dark:in-data-dragging:border-white/20')
+    ->add('[[disabled]_&]:opacity-75 [[disabled]_&]:pointer-events-none')
+    ;
+
+$iconClasses = Flux::classes()
+    ->add('text-zinc-400 dark:text-white/60 transition')
+    ->add('[[disabled]:hover_&]:text-zinc-400 dark:[[disabled]:hover_&]:text-white/60')
+    ->add('in-data-dragging:text-zinc-800 dark:in-data-dragging:text-white')
+    ->add('[[data-flux-file-upload-trigger]:hover_&]:text-zinc-800 dark:[[data-flux-file-upload-trigger]:hover_&]:text-white')
+    ->add($withProgress ? '' : 'in-data-loading:opacity-0')
+    ;
+
+$loadingClasses = Flux::classes()
+    ->add('absolute inset-0 text-zinc-800 dark:text-white transition')
+    ->add($withProgress ? 'opacity-0' : 'opacity-0 in-data-loading:opacity-100')
+    ;
+@endphp
+
+<div {{ $attributes->class($classes) }} data-flux-file-upload-dropzone>
+    <div class="relative {{ $inline ? 'me-4' : 'mb-4' }}">
+        <flux:icon
+            name="{{ $icon }}"
+            variant="solid"
+            class="{{ $iconClasses }}"
+        />
+
+        <flux:icon
+            name="loading"
+            variant="solid"
+            class="{{ $loadingClasses }}"
+        />
+    </div>
+
+    <div class="flex flex-col {{ $inline ? 'gap-1' : 'items-center gap-2' }}">
+        <?php if ($heading) : ?>
+            <div class="text-sm font-medium text-zinc-800 dark:text-white cursor-default [[disabled]_&]:opacity-75">
+                {{ $heading }}
+            </div>
+        <?php endif; ?>
+
+        <?php if ($text) : ?>
+            <div class="relative text-zinc-500 dark:text-white/60 cursor-default {{ $inline ? 'text-xs' : 'text-sm' }}">
+                @if ($withProgress)
+                    <div class="not-in-data-loading:opacity-0 absolute inset-x-0 top-0 flex gap-3 items-center">
+                        <div class="flex-1 h-1 rounded-full bg-zinc-200 dark:bg-white/10">
+                            <div class="h-full rounded-full bg-zinc-500 dark:bg-white" style="width: var(--flux-file-upload-progress)"></div>
+                        </div>
+
+                        <div class="text-zinc-500 dark:text-white/70 tabular-nums font-medium after:content-[var(--flux-file-upload-progress-as-string)]"></div>
+                    </div>
+
+                    <span class="in-data-loading:opacity-0">{{ $text }}</span>
+                @else
+                    {{ $text }}
+                @endif
+            </div>
+        <?php endif; ?>
+    </div>
+</div>

resources/views/flux/file-upload/index.blade.php

@@ -0,0 +1,27 @@
+@blaze
+
+@props([
+    'name' => $attributes->whereStartsWith('wire:model')->first(),
+])
+
+@php
+$classes = Flux::classes()
+    // NOTE: We need to add relative positioning here to prevent odd overflow behaviors because of
+    // "sr-only": https://github.com/tailwindlabs/tailwindcss/discussions/12429
+    ->add('relative')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-0 p-0 bg-transparent')
+    ;
+@endphp
+
+<flux:with-field :$attributes :$name>
+    <ui-file-upload
+        {{ $attributes->class($classes) }}
+        @if($name) name="{{ $name }}" @endif
+        data-flux-file-upload
+    >
+        <input type="file" wire:ignore data-slot="receiver" class="sr-only" @if($name) name="{{ $name }}" @endif />
+
+        {{ $slot }}
+    </ui-file-upload>
+</flux:with-field>