🎨 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/pillbox/empty.blade.php

@@ -0,0 +1,4 @@
+{{-- This file exists for backwards compatibility... --}}
+<flux:pillbox.option.empty {{ $attributes }}>
+    {{ $slot }}
+</flux:pillbox.option.empty>

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

@@ -0,0 +1,7 @@
+@props([
+    'variant' => 'default',
+])
+
+<flux:with-field :$attributes>
+    <flux:delegate-component :component="'pillbox.variants.' . $variant">{{ $slot }}</flux:delegate-component>
+</flux:with-field>

resources/views/flux/pillbox/indicator.blade.php

@@ -0,0 +1,3 @@
+@blaze
+
+<flux:icon variant="mini" icon="check" class="hidden [ui-option[data-selected]_&]:block" />

resources/views/flux/pillbox/input.blade.php

@@ -0,0 +1,30 @@
+@props([
+    'placeholder' => null,
+    'invalid' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('min-w-12 shrink flex-1 outline-none ms-1')
+    ->add('placeholder-zinc-400 dark:placeholder-zinc-400 disabled:placeholder-zinc-400/70 dark:disabled:placeholder-zinc-500')
+    ->add('data-invalid:text-red-500 dark:data-invalid:text-red-400');
+
+$name = $attributes->whereStartsWith('wire:model')->first();
+
+$invalid ??= ($name && $errors->has($name));
+
+$loading = $attributes->whereStartsWith('wire:model.live')->isNotEmpty();
+
+if ($loading) {
+    $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+<input
+    type="text"
+    {{ $attributes->class($classes) }}
+    @if ($invalid) aria-invalid="true" data-invalid @endif
+    placeholder="{{ $placeholder }}"
+    data-placeholder="{{ $placeholder }}"
+    data-flux-pillbox-input
+>

resources/views/flux/pillbox/option.blade.php

@@ -0,0 +1,45 @@
+@blaze
+
+@props([
+    'filterable' => null,
+    'loading' => null,
+    'label' => null,
+    'value' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/option overflow-hidden data-hidden:hidden group flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium select-none')
+    ->add('text-zinc-800 data-active:bg-zinc-100 [&[disabled]]:text-zinc-400 dark:text-white dark:data-active:bg-zinc-600 dark:[&[disabled]]:text-zinc-400')
+    ;
+
+$livewireAction = $attributes->whereStartsWith('wire:click')->isNotEmpty();
+$alpineAction = $attributes->whereStartsWith('x-on:click')->isNotEmpty();
+
+$loading ??= $loading ?? $livewireAction;
+
+if ($loading) {
+    $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+<ui-option
+    @if ($value !== null) value="{{ $value }}" @endif
+    @if ($value) wire:key="{{ $value }}" @endif
+    @if ($filterable === false) filter="manual" @endif
+    @if ($livewireAction || $alpineAction) action @endif
+    {{ $attributes->class($classes) }}
+    data-flux-listbox-option
+>
+    <div class="w-6 shrink-0 [ui-selected_&]:hidden">
+        <flux:pillbox.indicator />
+    </div>
+
+    {{ $label ?? $slot }}
+
+    <?php if ($loading): ?>
+        <flux:icon.loading class="hidden [[data-flux-loading]>&]:block ms-auto text-zinc-400 [[data-flux-menu-item]:hover_&]:text-current" variant="micro" />
+    <?php endif; ?>
+</ui-option>

resources/views/flux/pillbox/option/create.blade.php

@@ -0,0 +1,32 @@
+@blaze
+
+@props([
+    'modal' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/option overflow-hidden data-hidden:hidden group flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium select-none')
+    ->add('text-zinc-800 data-active:bg-zinc-100 [&[disabled]]:text-zinc-400 dark:text-white dark:data-active:bg-zinc-600 dark:[&[disabled]]:text-zinc-400')
+    ;
+
+if ($modal) {
+    $attributes = $attributes->merge(['x-on:click' => "\$dispatch('modal-show', { name: '{$modal}' })"]);
+}
+
+if ($attributes->whereStartsWith('wire:click')->isNotEmpty()) {
+    $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+<ui-option-create {{ $attributes->class($classes) }} action data-flux-option-create>
+    <div class="w-6 shrink-0">
+        <flux:icon variant="mini" icon="plus" />
+    </div>
+
+    <span>{{ $slot }}</span>
+
+    <flux:icon.loading class="hidden [[data-flux-loading]>&]:block ms-auto text-zinc-400 [[data-flux-menu-item]:hover_&]:text-current" variant="micro" />
+</ui-option-create>

resources/views/flux/pillbox/option/empty.blade.php

@@ -0,0 +1,12 @@
+@php
+$classes = Flux::classes()
+    ->add('data-hidden:hidden block items-center px-2 py-1.5 w-full')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium')
+    ->add('text-zinc-500 data-active:bg-zinc-100 dark:text-zinc-300 dark:data-active:bg-zinc-600')
+    ;
+@endphp
+
+<ui-option-empty {{ $attributes->class($classes) }} data-flux-listbox-empty wire:ignore>
+    {{ $slot }}
+</ui-option-empty>

resources/views/flux/pillbox/options.blade.php

@@ -0,0 +1,51 @@
+@php $searchPlaceholder ??= $attributes->pluck('search:placeholder'); @endphp
+
+@aware([ 'searchable' ])
+
+@props([
+    'searchPlaceholder' => null,
+    'searchable' => null,
+    'search' => null,
+    'empty' => null,
+    'indicator' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('[:where(&)]:min-w-48 [:where(&)]:max-h-[14rem] p-[.3125rem] scroll-py-[.3125rem]')
+    ->add('rounded-lg shadow-xs')
+    ->add('border border-zinc-200 dark:border-zinc-600')
+    ->add('bg-white dark:bg-zinc-700')
+    ;
+
+// Searchable can also be a slot...
+if (is_object($searchable)) $search = $searchable;
+@endphp
+
+<?php if (! $searchable): ?>
+    <ui-options popover="manual" {{ $attributes->class($classes) }} data-flux-listbox-options>
+        {{ $slot }}
+    </ui-options>
+<?php else: ?>
+    <div popover="manual" class="[:where(&)]:min-w-48 [&:popover-open]:flex [&:popover-open]:flex-col rounded-lg shadow-xs border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700 p-[.3125rem]" data-flux-options>
+        <?php if ($search): ?> {{ $search }} <?php else: ?>
+            <flux:pillbox.search :placeholder="$searchPlaceholder" />
+        <?php endif; ?>
+
+        <ui-options class="max-h-[20rem] overflow-y-auto -me-[.3125rem] -mt-[.3125rem] pt-[.3125rem] pe-[.3125rem] -mb-[.3125rem] pb-[.3125rem] scroll-py-[.3125rem]">
+            <?php if ($empty): ?>
+                 <?php if (is_string($empty)): ?>
+                    <flux:pillbox.option.empty>{!! __($empty) !!}</flux:pillbox.option.empty>
+                <?php else: ?>
+                    {{ $empty }}
+                <?php endif; ?>
+            <?php else: ?>
+                <flux:pillbox.option.empty when-loading="{!! __('Loading...') !!}">
+                    {!! __('No results found') !!}
+                </flux:pillbox.option.empty>
+            <?php endif; ?>
+
+            {{ $slot }}
+        </ui-options>
+    </div>
+<?php endif; ?>

resources/views/flux/pillbox/search.blade.php

@@ -0,0 +1,81 @@
+@blaze
+
+@props([
+    'placeholder' => null,
+    'clearable' => true,
+    'closable' => null,
+    'icon' => null,
+])
+
+@php
+// Clerable or closable, not both...
+if ($closable !== null) $clearable = null;
+
+$classes = Flux::classes()
+    ->add('h-10 w-full flex items-center px-3 py-2')
+    ->add('font-medium text-base sm:text-sm text-zinc-800 dark:text-white')
+    ->add('ps-9') // Make room for magnifying glass icon...
+    ->add('pe-9') // Make room for clear/clos button and loading indicator...
+    ->add('outline-hidden')
+    ->add('border-b border-zinc-200 dark:border-zinc-600')
+    ->add('bg-white dark:bg-zinc-700')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-t-0 border-s-0 border-e-0 focus:ring-0 focus:border-zinc-200 dark:focus:border-zinc-600')
+    ->add('data-invalid:text-red-500 dark:data-invalid:text-red-400')
+    ;
+
+$name = $attributes->whereStartsWith('wire:model')->first();
+
+$invalid ??= ($name && $errors->has($name));
+
+$loading = $attributes->whereStartsWith('wire:model.live')->isNotEmpty();
+
+if ($loading) {
+    $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+<div class="relative flex grow mx-[-5px] mt-[-5px] mb-[5px]" data-flux-pillbox-search>
+    <div class="absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400 ps-3.5 start-0">
+        <?php if (is_string($icon)): ?>
+            <flux:icon :$icon variant="micro" />
+        <?php elseif ($icon): ?>
+            {{ $icon }}
+        <?php else: ?>
+            <flux:icon.magnifying-glass variant="micro" />
+        <?php endif; ?>
+    </div>
+
+    <input
+        type="text"
+        {{ $attributes->class($classes) }}
+        @if ($invalid) aria-invalid="true" data-invalid @endif
+        placeholder="{{ $placeholder ?? __('Search...') }}"
+        data-flux-pillbox-input
+        autofocus
+    />
+
+    <?php if ($loading): ?>
+        <div class="opacity-0 [[data-flux-pillbox-search]:has([data-flux-loading])_&]:opacity-100 transition-opacity absolute top-0 bottom-0 flex items-center justify-center pe-2.5 end-0">
+            <flux:icon.loading class="text-zinc-400 [[data-flux-menu-item]:hover_&]:text-current" variant="mini" />
+        </div>
+    <?php endif; ?>
+
+    <?php if ($closable): ?>
+        <div class="[[data-flux-pillbox-search]:has([data-flux-loading])_&]:opacity-0 transition-opacity absolute top-0 bottom-0 flex items-center justify-center pe-1 end-0">
+            <ui-close>
+                <flux:button square variant="subtle" size="sm" aria-label="Clear search input">
+                    <flux:icon.x-mark variant="micro" />
+                </flux:button>
+            </ui-close>
+        </div>
+    <?php elseif ($clearable): ?>
+        <div class="[[data-flux-pillbox-search]:has([data-flux-loading])_&]:opacity-0 transition-opacity absolute top-0 bottom-0 flex items-center justify-center pe-1 end-0 [[data-flux-pillbox-search]:has(input:placeholder-shown)_&]:hidden">
+            <flux:button square variant="subtle" size="sm" tabindex="-1" aria-label="Clear command input"
+                x-on:click="$el.closest('[data-flux-pillbox-search]').querySelector('input').value = ''; $el.closest('[data-flux-pillbox-search]').querySelector('input').dispatchEvent(new Event('input', { bubbles: false })); $el.closest('[data-flux-pillbox-search]').querySelector('input').focus()"
+            >
+                <flux:icon.x-mark variant="micro" />
+            </flux:button>
+        </div>
+    <?php endif; ?>
+</div>

resources/views/flux/pillbox/selected.blade.php

@@ -0,0 +1,64 @@
+@blaze
+
+@props([
+    'placeholder' => null,
+    'suffix' => null,
+    'size' => null,
+    'max' => null,
+    'input' => null
+])
+
+@php
+    $classes = Flux::classes()
+        ->add('truncate flex gap-2 text-start flex-1 text-zinc-700')
+        ->add('[[disabled]_&]:text-zinc-500 dark:text-zinc-300 dark:[[disabled]_&]:text-zinc-400');
+
+    $optionClasses = Flux::classes()
+        ->add('px-2 flex text-zinc-700 dark:text-zinc-200 bg-zinc-400/15 dark:bg-zinc-400/40')
+        ->add('cursor-default') // Combobox trigger sets cursor-text, so we need to reset it here...
+        ->add(match($size) {
+            default => 'rounded-md py-1 text-base sm:text-sm leading-4',
+            'sm' => 'rounded-sm py-[calc(0.125rem+1px)] text-sm leading-4',
+        });
+
+    $removeClasses = Flux::classes()
+        ->add('px-1 -me-2 text-zinc-400 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200')
+        ->add(match($size) {
+            default => 'py-[calc(0.25rem-1px)] -my-[calc(0.25rem-1px)]',
+            'sm' => 'py-[calc(0.25rem-2px)] -my-[calc(0.25rem-2px)]',
+        });
+@endphp
+
+<ui-selected {{ $attributes->class($classes) }}>
+    <?php if ($placeholder): ?>
+        <div class="contents" wire:ignore x-ignore>
+            <template name="placeholder">
+                <span class="ms-1 text-zinc-400 [[disabled]_&]:text-zinc-400/70 dark:text-zinc-400 dark:[[disabled]_&]:text-zinc-500" data-flux-pillbox-placeholder>
+                    {{ $placeholder }}
+                </span>
+            </template>
+        </div>
+    <?php endif; ?>
+
+    <template name="option">
+        <div {{ $attributes->class($optionClasses) }}>
+            <div class="font-medium"><slot name="text"></slot></div>
+
+            <ui-selected-remove {{ $attributes->class($removeClasses) }}>
+                <flux:icon.x-mark variant="micro" :class="$size === 'xs' ? 'size-3' : ''" />
+            </ui-selected-remove>
+        </div>
+    </template>
+
+    <div class="flex flex-wrap gap-1 grow">
+        <div class="contents" wire:ignore x-ignore>
+            <template name="options">
+                <div class="contents">
+                    <slot></slot>
+                </div>
+            </template>
+        </div>
+        
+        {{ $input }}
+    </div>
+</ui-selected>

resources/views/flux/pillbox/trigger.blade.php

@@ -0,0 +1,62 @@
+@aware([ 'placeholder', 'variant' ])
+
+@props([
+    'placeholder' => null,
+    'clearable' => null,
+    'invalid' => false,
+    'suffix' => null,
+    'size' => null,
+    'max' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/listbox-button cursor-default')
+    ->add('overflow-hidden') // Overflow hidden is here to prevent the button from growing when selected text is too long.
+    ->add('flex items-center')
+    ->add('shadow-xs')
+    ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+    // Make the placeholder match the text color of standard input placeholders...
+    ->add('disabled:shadow-none')
+    ->add(match($size) {
+        default => 'min-h-10 text-base sm:text-sm rounded-lg ps-[calc(0.5rem-1px)] pe-3 py-[calc(0.5rem-1px)] block w-full',
+        'sm' => 'min-h-6 text-sm rounded-lg ps-[calc(0.25rem)] pe-2 py-[calc(0.25rem)] block w-full',
+    })
+    ->add($invalid
+        ? 'border border-red-500'
+        : 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
+    )
+    ->add('in-[data-target]:text-start')
+    ->add($variant === 'combobox' ? 'has-focus-visible:outline-default' : '')
+    ;
+@endphp
+
+<ui-pillbox-trigger {{ $attributes->class($classes) }} @if ($invalid) data-invalid @endif data-flux-group-target data-flux-pillbox-trigger>
+    <?php if ($slot->isNotEmpty()): ?>
+        {{ $slot }}
+    <?php else: ?>
+        <flux:pillbox.selected :$placeholder :$max :$suffix :$size />
+    <?php endif; ?>
+
+    <?php if ($clearable): ?>
+        <flux:button as="div"
+            class="self-start cursor-pointer -my-1 ms-2 -me-2 [[data-flux-pillbox-trigger]:has([data-flux-pillbox-placeholder])_&]:hidden [[data-flux-pillbox][disabled]:has([data-selected])_&]:hidden"
+            variant="subtle"
+            :size="$size === 'sm' ? 'xs' : 'sm'"
+            square
+            tabindex="-1"
+            aria-label="Clear selected"
+            x-on:click.prevent.stop="let select = $el.closest('ui-pillbox'); select.value = select.hasAttribute('multiple') ? [] : null; select.dispatchEvent(new Event('change', { bubbles: false })); select.dispatchEvent(new Event('input', { bubbles: false }))"
+        >
+            <flux:icon.x-mark variant="micro" />
+        </flux:button>
+    <?php endif; ?>
+
+    <?php if($variant == 'combobox'): ?>
+        <flux:button size="sm" square variant="subtle" tabindex="-1" class="self-start -me-2 -my-1 [[disabled]_&]:pointer-events-none">
+            <flux:icon.chevron-up-down variant="mini" class="text-zinc-400/75 [[data-flux-input]:hover_&]:text-zinc-800 [[disabled]_&]:text-zinc-200! dark:text-white/60 dark:[[data-flux-input]:hover_&]:text-white dark:[[disabled]_&]:text-white/40!" />
+        </flux:button>
+    <?php else: ?>
+        <flux:icon.chevron-down variant="mini" class="self-start {{ $size === 'sm' ? 'mt-0.25 mb-0.25' : 'mt-0.5' }} ms-2 -me-1 pointer-events-none text-zinc-300 [[data-flux-pillbox-trigger]:hover_&]:text-zinc-800 [[disabled]_&]:text-zinc-200! dark:text-white/60 dark:[[data-flux-pillbox-trigger]:hover_&]:text-white dark:[[disabled]_&]:text-white/40!" />
+    <?php endif; ?>
+</ui-pillbox-trigger>

resources/views/flux/pillbox/variants/combobox.blade.php

@@ -0,0 +1,73 @@
+@props([
+    'selectedSuffix' => null,
+    'placeholder' => null,
+    'searchable' => null,
+    'clearable' => null,
+    'invalid' => null,
+    'trigger' => null,
+    'empty' => null,
+    'clear' => null,
+    'close' => null,
+    'name' => null,
+    'size' => null,
+    'input' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+if ($searchable) {
+    throw new \Exception('Comboboxes do not support the searchable prop.');
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class = Flux::classes()
+    ->add('w-full')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-0 p-0 bg-transparent')
+    ;
+@endphp
+
+<ui-pillbox
+    clear="{{ $clear ?? 'close esc select' }}"
+    @if ($close) close="{{ $close }}" @endif
+    {{ $attributes->class($class)->merge(['filter' => true]) }}
+    @if($showName) name="{{ $name }}" @endif
+    data-flux-control
+    data-flux-pillbox
+>
+    <?php if ($trigger): ?> {{ $trigger }} <?php else: ?>
+        <flux:pillbox.trigger class="cursor-text" :$placeholder :$invalid :$size :$clearable :suffix="$selectedSuffix">
+            <flux:pillbox.selected :$size :suffix="$selectedSuffix">
+                <x-slot name="input">
+                    <?php if ($input): ?> {{ $input }} <?php else: ?>
+                        <flux:pillbox.input :$placeholder />
+                    <?php endif; ?>
+                </x-slot>
+            </flux:pillbox.selected>
+        </flux:pillbox.trigger>
+    <?php endif; ?>
+
+    <flux:pillbox.options>
+        <?php if ($empty): ?>
+            <?php if (is_string($empty)): ?>
+                <flux:pillbox.option.empty>{!! __($empty) !!}</flux:pillbox.option.empty>
+            <?php else: ?>
+                {{ $empty }}
+            <?php endif; ?>
+        <?php else: ?>
+            <flux:pillbox.option.empty when-loading="{!! __('Loading...') !!}">
+                {!! __('No results found') !!}
+            </flux:pillbox.option.empty>
+        <?php endif; ?>
+
+        {{ $slot }}
+    </flux:pillbox.options>
+</ui-pillbox>

resources/views/flux/pillbox/variants/default.blade.php

@@ -0,0 +1,51 @@
+@php $searchPlaceholder ??= $attributes->pluck('search:placeholder'); @endphp
+
+@props([
+    'selectedSuffix' => null,
+    'placeholder' => null,
+    'searchable' => null,
+    'clearable' => null,
+    'invalid' => null,
+    'trigger' => null,
+    'search' => null, // Slot forwarding...
+    'empty' => null, // Slot forwarding...
+    'clear' => null,
+    'close' => null,
+    'name' => null,
+    'size' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class = Flux::classes()
+    ->add('w-full')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-0 p-0 bg-transparent')
+    ;
+@endphp
+
+<ui-pillbox
+    clear="{{ $clear ?? 'close esc select' }}"
+    @if ($close) close="{{ $close }}" @endif
+    {{ $attributes->class($class)->merge(['filter' => true]) }}
+    @if($showName) name="{{ $name }}" @endif
+    data-flux-control
+    data-flux-pillbox
+>
+    <?php if ($trigger): ?> {{ $trigger }} <?php else: ?>
+        <flux:pillbox.trigger :$placeholder :$invalid :$size :$clearable :suffix="$selectedSuffix" />
+    <?php endif; ?>
+
+    <flux:pillbox.options :$search :$searchable :$searchPlaceholder :$empty>
+        {{ $slot }}
+    </flux:select.options>
+</ui-pillbox>