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

@@ -0,0 +1,3 @@
+<flux:input.group>
+    {{ $slot }}
+</flux:input.group>

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

@@ -0,0 +1,28 @@
+@props([
+    'length' => null,
+    'private' => false,
+])
+
+@php
+    $classes = Flux::classes()
+        ->add('flex items-center gap-2 isolate w-fit')
+        ->add('[&_[data-flux-input-group]]:w-auto')
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-otp
+        {{ $attributes->class($classes) }}
+        data-flux-otp
+        data-flux-control
+        role="group"
+        data-flux-input-aria-label="{{ __('Character {current} of {total}') }}"
+    >
+        <?php if($slot->isEmpty() && $length): ?>
+            <?php for($i = 0; $i < $length; $i++): ?>
+                <flux:otp.input />
+            <?php endfor; ?>
+        <?php else: ?>
+            {{ $slot }}
+        <?php endif; ?>
+    </ui-otp>
+</flux:with-field>

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

@@ -0,0 +1,21 @@
+@aware(['mode' => 'numeric', 'private' => false])
+
+@php
+    $attributes = $attributes
+        ->merge([
+            'class' => 'w-8! grow-0 has-focus-within:z-10',
+            'class:input' => 'px-0! py-3 text-center disabled:opacity-75 disabled:shadow-xs! dark:disabled:shadow-none!',
+        ])
+        ->merge(['data-flux-otp-input' => ''])
+    ;
+
+    if ($mode == 'numeric') {
+        $attributes = $attributes->merge(['inputmode' => 'numeric']);
+    }
+
+    if ($private) {
+        $attributes = $attributes->merge(['type' => 'password']);
+    }
+@endphp
+
+<flux:input {{ $attributes }} />

resources/views/flux/otp/separator.blade.php

@@ -0,0 +1 @@
+<flux:text class="px-2">&mdash;</flux:text>