🎨 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/navlist/badge.blade.php

@@ -0,0 +1,56 @@
+@blaze
+
+@props([
+    'variant' => null,
+    'color' => null,
+])
+
+@php
+$class = Flux::classes()
+    ->add('text-xs font-medium rounded-sm px-1 py-0.5')
+    /**
+     * We can't compile classes for each color because of variants color to color and Tailwind's JIT compiler.
+     * We instead need to write out each one by hand. Sorry...
+     */
+    ->add($variant === 'solid' ? match ($color) {
+        default => 'text-white dark:text-white bg-zinc-600 dark:bg-zinc-600',
+        'red' => 'text-white dark:text-white bg-red-500 dark:bg-red-600',
+        'orange' => 'text-white dark:text-white bg-orange-500 dark:bg-orange-600',
+        'amber' => 'text-white dark:text-zinc-950 bg-amber-500 dark:bg-amber-500',
+        'yellow' => 'text-white dark:text-zinc-950 bg-yellow-500 dark:bg-yellow-400',
+        'lime' => 'text-white dark:text-white bg-lime-500 dark:bg-lime-600',
+        'green' => 'text-white dark:text-white bg-green-500 dark:bg-green-600',
+        'emerald' => 'text-white dark:text-white bg-emerald-500 dark:bg-emerald-600',
+        'teal' => 'text-white dark:text-white bg-teal-500 dark:bg-teal-600',
+        'cyan' => 'text-white dark:text-white bg-cyan-500 dark:bg-cyan-600',
+        'sky' => 'text-white dark:text-white bg-sky-500 dark:bg-sky-600',
+        'blue' => 'text-white dark:text-white bg-blue-500 dark:bg-blue-600',
+        'indigo' => 'text-white dark:text-white bg-indigo-500 dark:bg-indigo-600',
+        'violet' => 'text-white dark:text-white bg-violet-500 dark:bg-violet-600',
+        'purple' => 'text-white dark:text-white bg-purple-500 dark:bg-purple-600',
+        'fuchsia' => 'text-white dark:text-white bg-fuchsia-500 dark:bg-fuchsia-600',
+        'pink' => 'text-white dark:text-white bg-pink-500 dark:bg-pink-600',
+        'rose' => 'text-white dark:text-white bg-rose-500 dark:bg-rose-600',
+    } :  match ($color) {
+        default => 'text-zinc-700 dark:text-zinc-200 bg-zinc-400/15 dark:bg-zinc-400/40',
+        'red' => 'text-red-700 dark:text-red-200 bg-red-400/20 dark:bg-red-400/40',
+        'orange' => 'text-orange-700 dark:text-orange-200 bg-orange-400/20 dark:bg-orange-400/40',
+        'amber' => 'text-amber-700 dark:text-amber-200 bg-amber-400/25 dark:bg-amber-400/40',
+        'yellow' => 'text-yellow-800 dark:text-yellow-200 bg-yellow-400/25 dark:bg-yellow-400/40',
+        'lime' => 'text-lime-800 dark:text-lime-200 bg-lime-400/25 dark:bg-lime-400/40',
+        'green' => 'text-green-800 dark:text-green-200 bg-green-400/20 dark:bg-green-400/40',
+        'emerald' => 'text-emerald-800 dark:text-emerald-200 bg-emerald-400/20 dark:bg-emerald-400/40',
+        'teal' => 'text-teal-800 dark:text-teal-200 bg-teal-400/20 dark:bg-teal-400/40',
+        'cyan' => 'text-cyan-800 dark:text-cyan-200 bg-cyan-400/20 dark:bg-cyan-400/40',
+        'sky' => 'text-sky-800 dark:text-sky-200 bg-sky-400/20 dark:bg-sky-400/40',
+        'blue' => 'text-blue-800 dark:text-blue-200 bg-blue-400/20 dark:bg-blue-400/40',
+        'indigo' => 'text-indigo-700 dark:text-indigo-200 bg-indigo-400/20 dark:bg-indigo-400/40',
+        'violet' => 'text-violet-700 dark:text-violet-200 bg-violet-400/20 dark:bg-violet-400/40',
+        'purple' => 'text-purple-700 dark:text-purple-200 bg-purple-400/20 dark:bg-purple-400/40',
+        'fuchsia' => 'text-fuchsia-700 dark:text-fuchsia-200 bg-fuchsia-400/20 dark:bg-fuchsia-400/40',
+        'pink' => 'text-pink-700 dark:text-pink-200 bg-pink-400/20 dark:bg-pink-400/40',
+        'rose' => 'text-rose-700 dark:text-rose-200 bg-rose-400/20 dark:bg-rose-400/40',
+    });
+@endphp
+
+<span {{ $attributes->class($class) }} data-flux-navlist-badge>{{ $slot }}</span>

resources/views/flux/navlist/group.blade.php

@@ -0,0 +1,40 @@
+@blaze
+
+@props([
+    'expandable' => false,
+    'expanded' => true,
+    'heading' => null,
+])
+
+<?php if ($expandable && $heading): ?>
+    <ui-disclosure {{ $attributes->class('group/disclosure') }} @if ($expanded === true) open @endif data-flux-navlist-group>
+        <button type="button" class="w-full h-10 lg:h-8 flex items-center group/disclosure-button mb-[2px] rounded-lg hover:bg-zinc-800/5 dark:hover:bg-white/[7%] text-zinc-500 hover:text-zinc-800 dark:text-white/80 dark:hover:text-white">
+            <div class="ps-3 pe-4">
+                <flux:icon.chevron-down class="size-3! hidden group-data-open/disclosure-button:block" />
+                <flux:icon.chevron-right class="size-3! block group-data-open/disclosure-button:hidden rtl:rotate-180" />
+            </div>
+
+            <span class="text-sm font-medium leading-none">{{ $heading }}</span>
+        </button>
+
+        <div class="relative hidden data-open:block space-y-[2px] ps-7" @if ($expanded === true) data-open @endif>
+            <div class="absolute inset-y-[3px] w-px bg-zinc-200 dark:bg-white/30 start-0 ms-4"></div>
+
+            {{ $slot }}
+        </div>
+    </ui-disclosure>
+<?php elseif ($heading): ?>
+    <div {{ $attributes->class('block space-y-[2px]') }}>
+        <div class="px-3 py-2">
+            <div class="text-sm text-zinc-400 font-medium leading-none">{{ $heading }}</div>
+        </div>
+
+        <div>
+            {{ $slot }}
+        </div>
+    </div>
+<?php else: ?>
+    <div {{ $attributes->class('block space-y-[2px]') }}>
+        {{ $slot }}
+    </div>
+<?php endif; ?>

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

@@ -0,0 +1,16 @@
+@blaze
+
+@props([
+    'variant' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('flex flex-col')
+    ->add('overflow-visible min-h-auto')
+    ;
+@endphp
+
+<nav {{ $attributes->class($classes) }} data-flux-navlist>
+    {{ $slot }}
+</nav>

resources/views/flux/navlist/item.blade.php

@@ -0,0 +1,90 @@
+@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'variant' ])
+
+@props([
+    'iconVariant' => 'outline',
+    'iconTrailing' => null,
+    'badgeColor' => null,
+    'variant' => null,
+    'iconDot' => null,
+    'accent' => true,
+    'badge' => null,
+    'icon' => null,
+])
+
+@php
+// Button should be a square if it has no text contents...
+$square ??= $slot->isEmpty();
+
+// Size-up icons in square/icon-only buttons...
+$iconClasses = Flux::classes($square ? 'size-5!' : 'size-4!');
+
+$classes = Flux::classes()
+    ->add('h-10 lg:h-8 relative flex items-center gap-3 rounded-lg')
+    ->add($square ? 'px-2.5!' : '')
+    ->add('py-0 text-start w-full px-3 my-px')
+    ->add('text-zinc-500 dark:text-white/80')
+    ->add(match ($variant) {
+        'outline' => match ($accent) {
+            true => [
+                'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
+                'data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent',
+                'hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5 ',
+                'border border-transparent',
+            ],
+            false => [
+                'data-current:text-zinc-800 dark:data-current:text-zinc-100 data-current:border-zinc-200',
+                'data-current:bg-white dark:data-current:bg-white/10 data-current:border data-current:border-zinc-200 dark:data-current:border-white/10 data-current:shadow-xs',
+                'hover:text-zinc-800 dark:hover:text-white',
+            ],
+        },
+        default => match ($accent) {
+            true => [
+                'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
+                'data-current:bg-zinc-800/[4%] dark:data-current:bg-white/[7%]',
+                'hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-800/[4%] dark:hover:bg-white/[7%]',
+            ],
+            false => [
+                'data-current:text-zinc-800 dark:data-current:text-zinc-100',
+                'data-current:bg-zinc-800/[4%] dark:data-current:bg-white/10',
+                'hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-800/[4%] dark:hover:bg-white/10',
+            ],
+        },
+    })
+    ;
+@endphp
+
+<flux:button-or-link :attributes="$attributes->class($classes)" data-flux-navlist-item>
+    <?php if ($icon): ?>
+        <div class="relative">
+            <?php if (is_string($icon) && $icon !== ''): ?>
+                <flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
+            <?php else: ?>
+                {{ $icon }}
+            <?php endif; ?>
+
+            <?php if ($iconDot): ?>
+                <div class="absolute top-[-2px] end-[-2px]">
+                    <div class="size-[6px] rounded-full bg-zinc-500 dark:bg-zinc-400"></div>
+                </div>
+            <?php endif; ?>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($slot->isNotEmpty()): ?>
+        <div class="flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&]:hidden [[data-nav-sidebar]_[data-nav-footer]_&]:block" data-content>{{ $slot }}</div>
+    <?php endif; ?>
+
+    <?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
+        <flux:icon :icon="$iconTrailing" :variant="$iconVariant" class="size-4!" />
+    <?php elseif ($iconTrailing): ?>
+        {{ $iconTrailing }}
+    <?php endif; ?>
+
+    <?php if (isset($badge) && $badge !== ''): ?>
+        <?php $badgeAttributes = Flux::attributesAfter('badge:', $attributes, ['color' => $badgeColor]); ?>
+        <flux:navlist.badge :attributes="$badgeAttributes">{{ $badge }}</flux:navlist.badge>
+    <?php endif; ?>
+</flux:button-or-link>