🎨 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/radio/group/index.blade.php

@@ -0,0 +1,5 @@
+@props([
+    'variant' => 'default',
+])
+
+<flux:delegate-component :component="'radio.group.variants.' . $variant">{{ $slot }}</flux:delegate-component>

resources/views/flux/radio/group/variants/buttons.blade.php

@@ -0,0 +1,25 @@
+@props([
+    'variant' => null,
+    'size' => null,
+    'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the radio 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();
+}
+
+$classes = Flux::classes()
+    ->add('flex flex-wrap gap-2')
+    ;
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-buttons>
+        {{ $slot }}
+    </ui-radio-group>
+</flux:with-field>

resources/views/flux/radio/group/variants/cards.blade.php

@@ -0,0 +1,25 @@
+@props([
+    'variant' => null,
+    'size' => null,
+    'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the radio 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();
+}
+
+$classes = Flux::classes()
+    ->add('flex gap-3')
+    ;
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-cards>
+        {{ $slot }}
+    </ui-radio-group>
+</flux:with-field>

resources/views/flux/radio/group/variants/default.blade.php

@@ -0,0 +1,26 @@
+@props([
+    'name' => null,
+    'variant' => null,
+])
+
+@php
+// We only want to show the name attribute 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();
+}
+
+$classes = Flux::classes()
+    // Adjust spacing between fields...
+    ->add('*:data-flux-field:mb-3')
+    ->add('[&>[data-flux-field]:has(>[data-flux-description])]:mb-4')
+    ->add('[&>[data-flux-field]:last-child]:mb-0!')
+    ;
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group>
+        {{ $slot }}
+    </ui-radio-group>
+</flux:with-field>

resources/views/flux/radio/group/variants/pills.blade.php

@@ -0,0 +1,25 @@
+@props([
+    'variant' => null,
+    'size' => null,
+    'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the radio 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();
+}
+
+$classes = Flux::classes()
+    ->add('flex flex-wrap gap-3')
+    ;
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-pills>
+        {{ $slot }}
+    </ui-radio-group>
+</flux:with-field>

resources/views/flux/radio/group/variants/segmented.blade.php

@@ -0,0 +1,28 @@
+@props([
+    'name' => null,
+    'variant' => 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();
+}
+
+$classes = Flux::classes()
+    ->add('block flex p-1')
+    ->add('rounded-lg bg-zinc-800/5 dark:bg-white/10')
+    ->add($size === 'sm' ? 'h-8 py-[3px] px-[3px]' : 'h-10 p-1')
+    ->add($size === 'sm' ? '-my-px h-[calc(2rem+2px)]' : '')
+    ;
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-segmented>
+        {{ $slot }}
+    </ui-radio-group>
+</flux:with-field>

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

@@ -0,0 +1,16 @@
+@blaze
+
+@aware([ 'variant' ])
+
+@props([
+    'variant' => 'default',
+])
+
+@php
+// This prevents variants picked up by `@aware()` from other wrapping components like flux::modal from being used here...
+$variant = $variant !== 'default' && Flux::componentExists('radio.variants.' . $variant)
+    ? $variant
+    : 'default';
+@endphp
+
+<flux:delegate-component :component="'radio.variants.' . $variant">{{ $slot }}</flux:delegate-component>

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

@@ -0,0 +1,28 @@
+@blaze
+
+@php
+$classes = Flux::classes()
+    ->add('shrink-0 size-[1.125rem] rounded-full')
+    ->add('text-sm text-zinc-700 dark:text-zinc-800')
+    ->add('shadow-xs [ui-radio[disabled]_&]:opacity-75 [ui-radio[data-checked][disabled]_&]:opacity-50 [ui-radio[disabled]_&]:shadow-none [ui-radio[data-checked]_&]:shadow-none')
+    ->add('flex justify-center items-center [ui-radio[data-checked]_&>div]:block')
+    ->add([
+        'border',
+        'border-zinc-300 dark:border-white/10',
+        '[ui-radio[disabled]_&]:border-zinc-200 dark:[ui-radio[disabled]_&]:border-white/5',
+        '[ui-radio[data-checked]_&]:border-transparent data-indeterminate:border-transparent',
+        '[ui-radio[data-checked]_&]:[ui-radio[disabled]_&]:border-transparent data-indeterminate:border-transparent',
+        '[print-color-adjust:exact]',
+    ])
+    ->add([
+        'bg-white dark:bg-white/10',
+        '[ui-radio[data-checked]_&]:bg-[var(--color-accent)]',
+        'hover:[ui-radio[data-checked]_&]:bg-(--color-accent)',
+        'focus:[ui-radio[data-checked]_&]:bg-(--color-accent)',
+    ])
+    ;
+@endphp
+
+<div {{ $attributes->class($classes) }} data-flux-radio-indicator>
+    <div class="hidden size-2 rounded-full bg-[var(--color-accent-foreground)]"></div>
+</div>

resources/views/flux/radio/variants/buttons.blade.php

@@ -0,0 +1,67 @@
+@blaze
+
+@props([
+    'accent' => true,
+    'size' => 'base',
+    'label' => null,
+    'icon' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('flex relative items-center font-medium justify-center gap-2 whitespace-nowrap')
+    ->add(match ($size) {
+        'base' => 'h-10 text-sm rounded-lg px-4 [&:has(>:not(span):first-child)]:ps-3 [&:has(>:not(span):last-child)]:pe-3',
+        'sm' => 'h-8 text-sm rounded-md px-3',
+        'xs' => 'h-6 text-xs rounded-md px-2',
+    })
+    ->add(match ($size) {
+        'base' => 'shadow-xs',
+        'sm' => 'shadow-xs',
+        'xs' => 'shadow-none',
+    })
+    ->add('text-zinc-800 dark:text-white')
+    ->add('bg-white dark:bg-zinc-700')
+    ->add('after:absolute after:-inset-px after:rounded-lg')
+    ->add('border border-zinc-200 border-b-zinc-300/80 dark:border-zinc-600')
+    ->add([
+        '[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_97.5%)]',
+        '[--haze-border:color-mix(in_oklab,_var(--color-accent-content),_transparent_80%)]',
+        '[--haze-light:color-mix(in_oklab,_var(--color-accent),_transparent_98%)]',
+        'dark:[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_90%)]',
+    ])
+    ->add(match ($accent) {
+        true => [
+            'hover:border-[var(--haze-border)] dark:hover:border-zinc-500',
+            'dark:data-checked:bg-white/15 data-checked:border-(--color-accent) hover:data-checked:border-(--color-accent)',
+            'hover:after:bg-[var(--haze-light)] dark:hover:after:bg-white/[4%] data-checked:after:bg-(--haze) hover:data-checked:after:bg-(--haze)',
+        ],
+        false => [
+            'hover:border-zinc-200 dark:hover:border-zinc-500',
+            'data-checked:bg-zinc-50 dark:data-checked:bg-white/15 data-checked:border-zinc-800 dark:data-checked:border-white',
+            'hover:bg-zinc-50 dark:hover:bg-zinc-600/75',
+        ],
+    })
+    ->add('disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none')
+    ;
+
+$iconAttributes = Flux::attributesAfter('icon:', $attributes, [
+    'class' => 'text-zinc-300 dark:text-zinc-400 in-data-checked:text-zinc-800 dark:in-data-checked:text-white',
+    'variant' => 'micro',
+]);
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-buttons tabindex="-1" data-flux-field>
+    <?php if (is_string($icon) && $icon !== ''): ?>
+        <flux:icon :icon="$icon" :attributes="$iconAttributes" />
+    <?php elseif ($icon): ?>
+        {{ $icon }}
+    <?php endif; ?>
+
+    @if (isset($label) || $slot->isNotEmpty())
+        <span>{{ $label ?? $slot }}</span>
+    @endif
+</ui-radio>

resources/views/flux/radio/variants/cards.blade.php

@@ -0,0 +1,79 @@
+@blaze
+
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'indicator' ])
+
+@props([
+    'iconVariant' => 'micro',
+    'description' => null,
+    'indicator' => true,
+    'accent' => true,
+    'label' => null,
+    'icon' => null,
+])
+
+@php
+$iconClasses = Flux::classes()
+    ->add('inline-block mt-0.5 text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white')
+    // When using the outline icon variant, we need to size it down to match the default icon sizes...
+    ->add($iconVariant === 'outline' ? 'size-4' : '')
+    ;
+
+$classes = Flux::classes()
+    ->add('relative flex justify-between gap-3 flex-1 p-4')
+    ->add('rounded-lg shadow-xs')
+    ->add('bg-white dark:bg-white/10 dark:hover:bg-white/15 dark:data-checked:bg-white/15')
+    ->add('after:absolute after:-inset-px after:rounded-lg')
+    ->add('border border-zinc-800/15 dark:border-white/10')
+    ->add([
+        '[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_97.5%)]',
+        '[--haze-border:color-mix(in_oklab,_var(--color-accent-content),_transparent_80%)]',
+        '[--haze-light:color-mix(in_oklab,_var(--color-accent),_transparent_98%)]',
+        'dark:[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_90%)]',
+    ])
+    ->add(match ($accent) {
+        true => [
+            '[&:hover_[data-flux-radio-indicator]]:border-[var(--haze-border)] dark:[&:hover_[data-flux-radio-indicator]]:border-white/10',
+            'hover:border-[var(--haze-border)] dark:hover:border-white/10',
+
+            'data-checked:border-(--color-accent) hover:data-checked:border-(--color-accent) dark:data-checked:bg-white/15 ',
+            'hover:after:bg-[var(--haze-light)] dark:hover:after:bg-white/[4%] data-checked:after:bg-(--haze) hover:data-checked:after:bg-(--haze)',
+        ],
+        false => [
+            'data-checked:bg-zinc-50 dark:data-checked:bg-white/15 data-checked:border-zinc-800 dark:data-checked:border-white',
+            'hover:bg-zinc-50 dark:hover:bg-white/15',
+        ],
+    })
+    ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+    ;
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-cards tabindex="-1" data-flux-field>
+    <?php if ($label): ?>
+        <div class="flex-1 flex gap-2">
+            <?php if (is_string($icon) && $icon !== ''): ?>
+                <flux:icon :icon="$icon" :variant="$iconVariant" :class="$iconClasses" />
+            <?php elseif ($icon): ?>
+                {{ $icon }}
+            <?php endif; ?>
+
+            <div class="flex-1">
+                <flux:heading>{{ $label ?? $slot }}</flux:heading>
+
+                <?php if ($description): ?>
+                    <flux:subheading size="sm">{{ $description }}</flux:subheading>
+                <?php endif; ?>
+            </div>
+        </div>
+
+        <?php if ($indicator): ?>
+            <flux:radio.indicator />
+        <?php endif; ?>
+    <?php else: ?>
+        {{ $slot }}
+    <?php endif; ?>
+</ui-radio>

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

@@ -0,0 +1,14 @@
+@blaze
+
+@props([
+    'name' => $attributes->whereStartsWith('wire:model')->first(),
+])
+
+<flux:with-inline-field variant="inline" :$attributes>
+    {{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+    {{-- even with durable attributes for some reason... --}}
+    {{-- We are redundantly setting the size of this container to 1.125rem so that the focus outline isn't oblong. --}}
+    <ui-radio {{ $attributes->class('flex size-[1.125rem] rounded-full mt-px outline-offset-2') }} data-flux-control data-flux-radio tabindex="-1">
+        <flux:radio.indicator />
+    </ui-radio>
+</flux:with-inline-field>

resources/views/flux/radio/variants/pills.blade.php

@@ -0,0 +1,29 @@
+@blaze
+
+@props([
+    'accent' => true,
+    'label' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('flex whitespace-nowrap gap-2 items-center py-1 px-2 rounded-full text-sm font-medium leading-4')
+    ->add('bg-zinc-800/6 dark:bg-white/10 hover:bg-zinc-800/10 dark:hover:bg-white/15 text-zinc-800 hover:text-zinc-800 dark:text-white/70 dark:hover:text-white')
+    ->add(match ($accent) {
+        true => 'data-checked:bg-(--color-accent) hover:data-checked:bg-(--color-accent)',
+        false => 'data-checked:bg-zinc-800 dark:data-checked:bg-white',
+    })
+    ->add(match ($accent) {
+        true => 'data-checked:text-(--color-accent-foreground) hover:data-checked:text-(--color-accent-foreground)',
+        false => 'data-checked:text-white dark:data-checked:text-zinc-800',
+    })
+    ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+    ;
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-pills tabindex="-1" data-flux-field>
+    {{ $label ?? $slot }}
+</ui-radio>

resources/views/flux/radio/variants/segmented.blade.php

@@ -0,0 +1,54 @@
+@blaze
+
+@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'size' ])
+
+@props([
+    'iconTrailing' => null,
+    'iconVariant' => null,
+    'label' => null,
+    'icon' => null,
+    'size' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('flex whitespace-nowrap flex-1 justify-center items-center gap-2')
+    ->add('rounded-md data-checked:shadow-xs')
+    ->add('text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-checked:text-zinc-800 dark:data-checked:text-white')
+    ->add('data-checked:bg-white dark:data-checked:bg-white/20')
+    ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+    ->add(match ($size) {
+        'sm' => 'px-3 text-sm',
+        default => 'px-4',
+    })
+    ;
+
+$iconVariant ??= 'mini';
+
+$iconClasses = Flux::classes('text-zinc-500 dark:text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white')
+    // When using the outline icon variant, we need to size it down to match the default icon sizes...
+    ->add($iconVariant === 'outline' ? 'size-5' : '')
+    ;
+
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+<ui-radio {{ $attributes->class($classes) }} data-flux-control data-flux-radio-segmented tabindex="-1">
+    <?php if (is_string($icon) && $icon !== ''): ?>
+        <flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
+    <?php elseif ($icon): ?>
+        {{ $icon }}
+    <?php endif; ?>
+
+    {{ $label ?? $slot }}
+
+    <?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
+        <flux:icon :icon="$iconTrailing" variant="micro" />
+    <?php elseif ($iconTrailing): ?>
+        {{ $iconTrailing }}
+    <?php endif; ?>
+</ui-radio>