🎨 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/accordion/content.blade.php

@@ -0,0 +1,23 @@
+@aware([ 'transition', 'expanded' ])
+
+@props([
+    'transition' => false,
+    'expanded' => false,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('pt-2 text-sm text-zinc-500 dark:text-zinc-300')
+    ;
+@endphp
+
+<div
+    x-show="open"
+    @if ($transition) x-collapse @endif
+    @if (! $expanded) x-cloak @endif
+    data-flux-accordion-content
+>
+    <div {{ $attributes->class($classes) }}>
+        {{ $slot }}
+    </div>
+</div>

resources/views/flux/accordion/heading.blade.php

@@ -0,0 +1,33 @@
+@aware([ 'disabled', 'variant' ])
+
+@props([
+    'disabled' => null,
+    'variant' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/accordion-heading flex items-center w-full')
+    ->add('text-start text-sm font-medium')
+    ->add(match ($variant) {
+        default => 'justify-between [&>svg]:ms-6',
+        'reverse' => 'flex-row-reverse justify-end [&>svg]:me-2',
+    })
+    ->add($disabled
+        ? 'text-zinc-400 dark:text-zinc-400 cursor-default'
+        : 'text-zinc-800 dark:text-white cursor-pointer'
+    )
+    ;
+@endphp
+
+<button type="button" {{ $attributes->class($classes) }} @if ($disabled) disabled @endif data-flux-accordion-heading>
+    <span class="flex-1">{{ $slot }}</span>
+
+    <?php if ($variant === 'reverse'): ?>
+        <flux:accordion.icon pointing="down" class="hidden group-data-open/accordion-heading:block text-zinc-800! dark:text-white!" />
+        <flux:accordion.icon pointing="right" class="block group-data-open/accordion-heading:hidden" />
+    <?php else: ?>
+        <flux:accordion.icon pointing="up" class="hidden group-data-open/accordion-heading:block text-zinc-800! dark:text-white!" />
+        <flux:accordion.icon pointing="down" class="block group-data-open/accordion-heading:hidden" />
+    <?php endif; ?>
+</button>

resources/views/flux/accordion/icon.blade.php

@@ -0,0 +1,17 @@
+@aware([ 'disabled' ])
+
+@props([
+    'pointing' => 'down',
+    'disabled' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('text-zinc-300 dark:text-zinc-400')
+    ->add($disabled ? ''
+        : 'group-hover/accordion-heading:text-zinc-800 dark:group-hover/accordion-heading:text-white'
+    )
+    ;
+@endphp
+
+<flux:icon :icon="'chevron-'.$pointing" variant="mini" aria-hidden="true" :attributes="$attributes->class($classes)" />

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

@@ -0,0 +1,9 @@
+@blaze
+
+@props([
+    'variant' => null,
+])
+
+<ui-disclosure-group {{ $attributes->class('block') }} data-flux-accordion-heading>
+    {{ $slot }}
+</ui-disclosure-group>

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

@@ -0,0 +1,42 @@
+@aware([ 'transition' ])
+
+@props([
+    'transition' => false,
+    'disabled' => false,
+    'expanded' => false,
+    'heading' => null,
+])
+
+@php
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+    unset($attributes[$wireModel->directive]);
+
+    $wireModel->directive .= '.self';
+
+    $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+
+// Support binding the state to a Livewire property
+$state = $wireModel?->value ? '$wire.' . $wireModel->value : ($expanded ? 'true' : 'false');
+
+$classes = Flux::classes()
+    ->add('block pt-4 first:pt-0 pb-4 last:pb-0')
+    ->add('border-b last:border-b-0 border-zinc-800/10 dark:border-white/10')
+    ;
+@endphp
+
+<ui-disclosure
+    {{ $attributes->class($classes) }}
+    x-data="{ open: {{ $state }} }"
+    x-model.self="open"
+    data-flux-accordion-item
+>
+    <?php if ($heading): ?>
+        <flux:accordion.heading>{{ $heading }}</flux:accordion.heading>
+
+        <flux:accordion.content>{{ $slot }}</flux:accordion.content>
+    <?php else: ?>
+        {{ $slot }}
+    <?php endif; ?>
+</ui-disclosure>