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

@@ -0,0 +1,67 @@
+@aware([ 'variant' ])
+
+@props([
+    'size' => null,
+    'variant' => null,
+    'scrollable' => false,
+])
+
+@php
+if ($variant === 'pills') {
+    $classes = Flux::classes()
+        ->add('flex gap-4 h-8')
+        ;
+} elseif ($variant === 'segmented') {
+    $classes = Flux::classes()
+        ->add('inline-flex p-1')
+        ->add($scrollable ? '' : 'rounded-lg bg-zinc-800/5 dark:bg-white/10')
+        ->add($size === 'sm' ? 'h-[calc(2rem+2px)] py-[3px] px-[3px]' : 'h-10 p-1')
+        ;
+} else {
+    $classes = Flux::classes()
+        ->add('flex gap-4 h-10 border-b')
+        ->add($scrollable ? 'border-transparent' : 'border-zinc-800/10 dark:border-white/20')
+        ;
+}
+
+$scrollableFade = $attributes->pluck('scrollable:fade', false);
+$scrollableScrollbar = $attributes->pluck('scrollable:scrollbar', null);
+
+$wrapperClasses = Flux::classes()
+    ->add('relative')
+    ->add($variant === 'segmented' ? 'rounded-lg bg-zinc-800/5 dark:bg-white/10' : '');
+
+$borderClasses = Flux::classes()
+    ->add('absolute inset-x-0 bottom-0 h-px')
+    ->add($variant === null ? 'bg-zinc-800/10 dark:bg-white/20' : '')
+    ;
+
+$scrollAreaClasses = Flux::classes()
+    ->add('relative flex overflow-auto')
+    ->add($scrollableFade ? [
+        '[--flux-scroll-percentage:0%]', // This is controlled by JavaScript...
+        'mask-r-from-[max(calc(100%-6rem),var(--flux-scroll-percentage))]',
+        'rtl:mask-r-from-100% rtl:mask-l-from-[max(calc(100%-6rem),var(--flux-scroll-percentage))]',
+    ] : '')
+    ->add($scrollableScrollbar === 'hide' ? 'flux-no-scrollbar' : '')
+    ->add($variant == 'segmented' ? 'rounded-lg' : '')
+    ;
+@endphp
+
+<?php if ($scrollable): ?>
+    <div class="{{ $wrapperClasses }}">
+        <div class="{{ $borderClasses }}"></div>
+
+        <ui-tabs-scroll-area class="{{ $scrollAreaClasses }}">
+            <div class="min-w-full flex-none">
+                <ui-tabs {{ $attributes->class($classes) }} data-flux-tabs>
+                    {{ $slot }}
+                </ui-tabs>
+            </div>
+        </ui-tabs-scroll-area>
+    </div>
+<?php else: ?>
+    <ui-tabs {{ $attributes->class($classes) }} data-flux-tabs>
+        {{ $slot }}
+    </ui-tabs>
+<?php endif; ?>