🎨 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/table/cell.blade.php

@@ -0,0 +1,36 @@
+@blaze
+
+@props([
+    'align' => 'start',
+    'variant' => null,
+    'sticky' => false,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('py-3 px-3 first:ps-0 last:pe-0 text-sm')
+    ->add(match($align) {
+        'center' => 'text-center',
+        'end' => 'text-end',
+        default => '',
+    })
+    ->add(match ($variant) {
+        'strong' => 'font-medium text-text-primary',
+        default => 'text-text-secondary',
+    })
+    ->add($sticky ? [
+        'z-10',
+        'first:sticky first:left-0',
+        'last:sticky last:right-0',
+        'first:after:w-8 first:after:absolute first:after:inset-y-0 first:after:right-0 first:after:translate-x-full first:after:pointer-events-none',
+        'last:after:w-8 last:after:absolute last:after:inset-y-0 last:after:left-0 last:after:-translate-x-full last:after:pointer-events-none',
+        'in-data-scrolled-right:first:after:inset-shadow-[8px_0px_8px_-8px_rgba(0,0,0,0.05)]',
+        'in-data-scrolled-left:last:after:inset-shadow-[-8px_0px_8px_-8px_rgba(0,0,0,0.05)]',
+    ]: '')
+    ->add('not-in-[tr:first-child]:border-t border-border-subtle')
+    ;
+@endphp
+
+<td {{ $attributes->class($classes) }} data-flux-cell>
+    {{ $slot }}
+</td>

resources/views/flux/table/column.blade.php

@@ -0,0 +1,48 @@
+@blaze
+
+@props([
+    'direction' => null,
+    'sortable' => false,
+    'sorted' => false,
+    'align' => 'start',
+    'sticky' => false,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('py-3 px-3 first:ps-0 last:pe-0')
+    ->add('text-start text-sm font-medium text-text-secondary')
+    ->add('border-b border-border-default')
+    ->add(match($align) {
+        'center' => 'group/center-align',
+        'end' => 'group/end-align',
+        // Right is @deprecated but needed for backwards compatibility...
+        'right' => 'group/end-align',
+        default => '',
+    })
+    ->add($sticky ? [
+        'z-10',
+        'first:sticky first:left-0',
+        'last:sticky last:right-0',
+        'first:after:w-8 first:after:absolute first:after:inset-y-0 first:after:right-0 first:after:translate-x-full first:after:pointer-events-none',
+        'last:after:w-8 last:after:absolute last:after:inset-y-0 last:after:left-0 last:after:-translate-x-full last:after:pointer-events-none',
+        'in-data-scrolled-right:first:after:inset-shadow-[8px_0px_8px_-8px_rgba(0,0,0,0.05)]',
+        'in-data-scrolled-left:last:after:inset-shadow-[-8px_0px_8px_-8px_rgba(0,0,0,0.05)]',
+    ]: '')
+    // If the last column is sortable, remove the right negative margin that the sortable applies to itself, as the
+    // negative margin caused the last column to overflow the table creating an unnecessary horizontal scrollbar...
+    ->add('**:data-flux-table-sortable:last:me-0')
+    ;
+@endphp
+
+<th {{ $attributes->class($classes) }} data-flux-column>
+    <?php if ($sortable): ?>
+        <div class="flex in-[.group\/center-align]:justify-center in-[.group\/end-align]:justify-end">
+            <flux:table.sortable :$sorted :direction="$direction">
+                <div>{{ $slot }}</div>
+            </flux:table.sortable>
+        </div>
+    <?php else: ?>
+        <div class="flex in-[.group\/center-align]:justify-center in-[.group\/end-align]:justify-end">{{ $slot }}</div>
+    <?php endif; ?>
+</th>

resources/views/flux/table/columns.blade.php

@@ -0,0 +1,17 @@
+@blaze
+
+@props([
+    'sticky' => false,
+])
+
+@php
+    $classes = Flux::classes()
+        ->add($sticky ? 'sticky top-0 z-20' : '')
+    ;
+@endphp
+
+<thead {{ $attributes->class($classes) }} data-flux-columns>
+    <tr {{ isset($tr) ? $tr->attributes : '' }}>
+        {{ $tr ?? $slot }}
+    </tr>
+</thead>

resources/views/flux/table/index.blade.php

@@ -0,0 +1,33 @@
+@props([
+    'paginate' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('[:where(&)]:min-w-full table-fixed border-separate border-spacing-0 isolate')
+    ->add('text-text-primary')
+    // We want whitespace-nowrap for the table, but not for modals and dropdowns...
+    ->add('whitespace-nowrap [&_dialog]:whitespace-normal [&_[popover]]:whitespace-normal')
+    ;
+
+$containerClasses = Flux::classes()
+    ->add('flex flex-col')
+    ->add($attributes->pluck('container:class'))
+    ;
+@endphp
+
+<div class="{{ $containerClasses }}">
+    {{ $header ?? '' }}
+
+    <ui-table-scroll-area class="overflow-auto">
+        <table {{ $attributes->class($classes) }} data-flux-table>
+            {{ $slot }}
+        </table>
+    </ui-table-scroll-area>
+
+    {{ $footer ?? '' }}
+
+    <?php if ($paginate): ?>
+        <flux:pagination class="shrink-0" :paginator="$paginate" />
+    <?php endif; ?>
+</div>

resources/views/flux/table/row.blade.php

@@ -0,0 +1,16 @@
+@blaze
+
+@props([
+    'key' => null,
+    'sticky' => false,
+])
+
+@php
+$classes = Flux::classes()
+    ->add($sticky ? 'last:sticky last:bottom-0 last:z-20' : '')
+    ;
+@endphp
+
+<tr @if ($key) wire:key="table-{{ $key }}" @endif {{ $attributes->class($classes) }} data-flux-row>
+    {{ $slot }}
+</tr>

resources/views/flux/table/rows.blade.php

@@ -0,0 +1,5 @@
+@blaze
+
+<tbody {{ $attributes }} data-flux-rows>
+    {{ $slot }}
+</tbody>

resources/views/flux/table/sortable.blade.php

@@ -0,0 +1,33 @@
+@blaze
+
+@props([
+    'direction' => null,
+    'sorted' => false,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/sortable flex items-center gap-1 -my-1 -ms-2 -me-2 px-2 py-1 ')
+    ->add('in-[.group\/end-align]:flex-row-reverse in-[.group\/end-align]:-me-2 in-[.group\/end-align]:-ms-8')
+    ;
+@endphp
+
+<button type="button" {{ $attributes->class($classes) }} data-flux-table-sortable>
+    {{ $slot }}
+
+    <div class="rounded-sm text-zinc-400 group-hover/sortable:text-zinc-800 dark:group-hover/sortable:text-white">
+        @if ($sorted)
+            @if ($direction === 'asc')
+                <flux:icon.chevron-up variant="micro" />
+            @elseif ($direction === 'desc')
+                <flux:icon.chevron-down variant="micro" />
+            @else
+                <flux:icon.chevron-down variant="micro" />
+            @endif
+        @else
+            <div class="opacity-0 group-hover/sortable:opacity-100">
+                <flux:icon.chevron-down variant="micro" />
+            </div>
+        @endif
+    </div>
+</button>