🎨 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.

2026-01-28 07:43:18 +00:00 · 2026-01-23 23:00:02 +01:00
parent 578e4f13fc
commit b30fec150c
792 changed files with 307541 additions and 117 deletions
--- a/resources/views/flux/editor/align.blade.php
+++ b/resources/views/flux/editor/align.blade.php
@@ -0,0 +1,35 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<ui-select data-editor="align" class="relative">
+    <flux:tooltip content="{{ __('Align') }}" :$kbd class="contents">
+        <flux:editor.button>
+            <ui-selected>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 10.5a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" /> </svg>
+                <div class="[ui-selected_&]:sr-only">{{ __('Left') }}</div>
+            </ui-selected>
+
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true"> <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg>
+        </flux:editor.button>
+    </flux:tooltip>
+
+    <ui-options popover="manual" class="min-w-[10rem] rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700 shadow-xs p-[5px]">
+        <flux:editor.option value="left" selected>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 10.5a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Left') }}</div>
+        </flux:editor.option>
+
+        <flux:editor.option value="center">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Center') }}</div>
+        </flux:editor.option>
+
+        <flux:editor.option value="right">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm7 10.5a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Right') }}</div>
+        </flux:editor.option>
+    </ui-options>
+</ui-select>
--- a/resources/views/flux/editor/blockquote.blade.php
+++ b/resources/views/flux/editor/blockquote.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘+Shift+B',
+])
+
+<flux:tooltip content="{{ __('Blockquote') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="blockquote">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M14.1667 5H2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 10H6.66666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 15H6.66666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2.5 10V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/bold.blade.php
+++ b/resources/views/flux/editor/bold.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘B',
+])
+
+<flux:tooltip content="{{ __('Bold') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="bold">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"> <path fill-rule="evenodd" d="M4 3a1 1 0 0 1 1-1h6a4.5 4.5 0 0 1 3.274 7.587A4.75 4.75 0 0 1 11.25 18H5a1 1 0 0 1-1-1V3Zm2.5 5.5v-4H11a2 2 0 1 1 0 4H6.5Zm0 2.5v4.5h4.75a2.25 2.25 0 0 0 0-4.5H6.5Z" clip-rule="evenodd" /> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/bullet.blade.php
+++ b/resources/views/flux/editor/bullet.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<flux:tooltip content="{{ __('Bullet list') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="bullet">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"> <path fill-rule="evenodd" d="M6 4.75A.75.75 0 0 1 6.75 4h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 4.75ZM6 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 10Zm0 5.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75a.75.75 0 0 1-.75-.75ZM1.99 4.75a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 15.25a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 10a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1V10Z" clip-rule="evenodd" /> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/button.blade.php
+++ b/resources/views/flux/editor/button.blade.php
@@ -0,0 +1,36 @@
+@blaze
+
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+    'iconVariant' => null,
+    'icon' => null,
+])
+
+@php
+$iconClasses = Flux::classes()
+    // When using the outline icon variant, we need to size it down to match the default icon sizes...
+    ->add($iconVariant === 'outline' ? ($slot->isEmpty() ? 'size-5' : 'size-4') : '')
+    ;
+
+$classes = Flux::classes()
+    ->add('p-0.5 flex items-center justify-center text-sm font-medium rounded-sm touch-manipulation')
+    ->add('text-zinc-400 data-open:text-zinc-800 hover:text-zinc-800 focus:text-zinc-800 data-match:text-zinc-800')
+    ->add('disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none')
+    ->add('dark:text-zinc-400 dark:data-open:text-white dark:hover:text-white dark:focus:text-white dark:data-match:text-white')
+    ->add('hover:bg-zinc-200 hover:text-zinc-800')
+    ->add('dark:hover:bg-white/10 dark:hover:text-white')
+;
+@endphp
+
+<flux:with-tooltip :$attributes>
+    <button type="button" {{ $attributes->class($classes) }}>
+        <?php if (is_string($icon) && $icon !== ''): ?>
+            <flux:icon :$icon :variant="$iconVariant ?? ($slot->isEmpty() ? 'mini' : 'micro')" :class="$iconClasses" />
+        <?php elseif ($icon): ?>
+            {{ $icon }}
+        <?php endif; ?>
+
+        {{ $slot }}
+    </button>
+</flux:with-tooltip>
--- a/resources/views/flux/editor/code.blade.php
+++ b/resources/views/flux/editor/code.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘E',
+])
+
+<flux:tooltip content="{{ __('Code') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="code">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"> <path fill-rule="evenodd" d="M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z" clip-rule="evenodd" /> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/content.blade.php
+++ b/resources/views/flux/editor/content.blade.php
@@ -0,0 +1,3 @@
+@blaze
+
+<ui-editor-content {{ $attributes }} wire:ignore>{{ $slot }}</ui-editor-content>
--- a/resources/views/flux/editor/heading.blade.php
+++ b/resources/views/flux/editor/heading.blade.php
@@ -0,0 +1,40 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<ui-select data-editor="heading" class="relative">
+    <flux:tooltip content="{{ __('Styles') }}" :$kbd class="contents">
+        <flux:editor.button>
+            <ui-selected>
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" aria-hidden="true"> <path d="M3.33331 5.83398V3.33398H16.6666V5.83398" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.5 16.666H12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 3.33398V16.6673" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg>
+                <div class="[ui-selected_&]:sr-only">{{ __('Text') }}</div>
+            </ui-selected>
+
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true"> <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" aria-hidden="true" /> </svg>
+        </flux:editor.button>
+    </flux:tooltip>
+
+    <ui-options popover="manual" aria-label="{{ __('Styles') }}" class="min-w-[10rem] rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700 shadow-xs p-[5px]">
+        <flux:editor.option value="paragraph" selected>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" aria-hidden="true"> <path d="M3.33331 5.83398V3.33398H16.6666V5.83398" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.5 16.666H12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10 3.33398V16.6673" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Text') }}</div>
+        </flux:editor.option>
+
+        <flux:editor.option value="heading1">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2.75 4a.75.75 0 0 1 .75.75v4.5h5v-4.5a.75.75 0 0 1 1.5 0v10.5a.75.75 0 0 1-1.5 0v-4.5h-5v4.5a.75.75 0 0 1-1.5 0V4.75A.75.75 0 0 1 2.75 4ZM13 8.75a.75.75 0 0 1 .75-.75h1.75a.75.75 0 0 1 .75.75v5.75h1a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5h1v-5h-1a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Heading 1') }}</div>
+        </flux:editor.option>
+
+        <flux:editor.option value="heading2">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2.75 4a.75.75 0 0 1 .75.75v4.5h5v-4.5a.75.75 0 0 1 1.5 0v10.5a.75.75 0 0 1-1.5 0v-4.5h-5v4.5a.75.75 0 0 1-1.5 0V4.75A.75.75 0 0 1 2.75 4ZM15 9.5c-.729 0-1.445.051-2.146.15a.75.75 0 0 1-.208-1.486 16.887 16.887 0 0 1 3.824-.1c.855.074 1.512.78 1.527 1.637a17.476 17.476 0 0 1-.009.931 1.713 1.713 0 0 1-1.18 1.556l-2.453.818a1.25 1.25 0 0 0-.855 1.185v.309h3.75a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75v-1.059a2.75 2.75 0 0 1 1.88-2.608l2.454-.818c.102-.034.153-.117.155-.188a15.556 15.556 0 0 0 .009-.85.171.171 0 0 0-.158-.169A15.458 15.458 0 0 0 15 9.5Z" clip-rule="evenodd" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Heading 2') }}</div>
+        </flux:editor.option>
+
+        <flux:editor.option value="heading3">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M2.75 4a.75.75 0 0 1 .75.75v4.5h5v-4.5a.75.75 0 0 1 1.5 0v10.5a.75.75 0 0 1-1.5 0v-4.5h-5v4.5a.75.75 0 0 1-1.5 0V4.75A.75.75 0 0 1 2.75 4ZM15 9.5c-.73 0-1.448.051-2.15.15a.75.75 0 1 1-.209-1.485 16.886 16.886 0 0 1 3.476-.128c.985.065 1.878.837 1.883 1.932V10a6.75 6.75 0 0 1-.301 2A6.75 6.75 0 0 1 18 14v.031c-.005 1.095-.898 1.867-1.883 1.932a17.018 17.018 0 0 1-3.467-.127.75.75 0 0 1 .209-1.485 15.377 15.377 0 0 0 3.16.115c.308-.02.48-.24.48-.441L16.5 14c0-.431-.052-.85-.15-1.25h-2.6a.75.75 0 0 1 0-1.5h2.6c.098-.4.15-.818.15-1.25v-.024c-.001-.201-.173-.422-.481-.443A15.485 15.485 0 0 0 15 9.5Z" clip-rule="evenodd" /> </svg>
+            <div class="[ui-selected_&]:sr-only">{{ __('Heading 3') }}</div>
+        </flux:editor.option>
+    </ui-options>
+</ui-select>
--- a/resources/views/flux/editor/highlight.blade.php
+++ b/resources/views/flux/editor/highlight.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<flux:tooltip content="{{ __('Highlight') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="highlight">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/index.blade.php
+++ b/resources/views/flux/editor/index.blade.php
@@ -0,0 +1,52 @@
+@props([
+    'toolbar' => null,
+    'invalid' => null,
+    'variant' => null,
+    'name' => 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));
+
+$classes = Flux::classes()
+    ->add('block w-full')
+    ->add(match($variant) {
+        'borderless' => [
+            '**:data-[slot=content]:p-2!',
+        ],
+        default => [
+            'shadow-xs [&[disabled]]:shadow-none border rounded-lg',
+            'bg-white dark:bg-white/10 dark:[&[disabled]]:bg-white/[7%]',
+            $invalid ? 'border-red-500' : 'border-zinc-200 border-b-zinc-300/80 dark:border-white/10',
+        ],
+    })
+    ->add('**:data-[slot=content]:text-base! sm:**:data-[slot=content]:text-sm!')
+    ->add('**:data-[slot=content]:text-zinc-700 dark:**:data-[slot=content]:text-zinc-300')
+    ->add('[&[disabled]_[data-slot=content]]:text-zinc-500 dark:[&[disabled]_[data-slot=content]]:text-zinc-400')
+    ;
+@endphp
+
+<flux:with-field :$attributes>
+    <ui-editor {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif aria-label="{{ __('Rich text editor') }}" data-flux-control data-flux-editor>
+        <?php if ($slot->isEmpty()): ?>
+            <flux:editor.toolbar :items="$toolbar" />
+
+            <flux:editor.content />
+        <?php else: ?>
+            {{ $slot }}
+        <?php endif; ?>
+    </ui-editor>
+</flux:with-field>
+
+@assets
+<flux:editor.scripts />
+<flux:editor.styles />
+@endassets
--- a/resources/views/flux/editor/italic.blade.php
+++ b/resources/views/flux/editor/italic.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘I',
+])
+
+<flux:tooltip content="{{ __('Italic') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="italic">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"> <path fill-rule="evenodd" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" clip-rule="evenodd" /> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/link.blade.php
+++ b/resources/views/flux/editor/link.blade.php
@@ -0,0 +1,33 @@
+@blaze
+
+@props([
+    'kbd' => '⌘K',
+])
+
+<flux:dropdown position="bottom center" data-editor="link" class="contents">
+    <flux:tooltip content="{{ __('Insert link') }}" :$kbd class="contents">
+        <flux:editor.button data-match-target>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M7.49999 14.1673H5.83332C4.72825 14.1673 3.66845 13.7283 2.88704 12.9469C2.10564 12.1655 1.66666 11.1057 1.66666 10.0007C1.66666 8.89558 2.10564 7.83577 2.88704 7.05437C3.66845 6.27297 4.72825 5.83398 5.83332 5.83398H7.49999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12.5 5.83398H14.1667C15.2717 5.83398 16.3315 6.27297 17.1129 7.05437C17.8943 7.83577 18.3333 8.89558 18.3333 10.0007C18.3333 11.1057 17.8943 12.1655 17.1129 12.9469C16.3315 13.7283 15.2717 14.1673 14.1667 14.1673H12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.66666 10H13.3333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+        </flux:editor.button>
+    </flux:tooltip>
+
+    <div popover="manual" class="min-w-[360px] p-[5px] rounded-lg border border-zinc-200 dark:border-zinc-600 shadow-xs bg-white dark:bg-zinc-700">
+        <div class="h-8 flex justify-between gap-2 ps-2 pe-1" data-flux-editor-link>
+            <input data-editor="link:url" type="text" form="" placeholder="https://..." class="flex-1 text-base sm:text-sm outline-hidden bg-transparent" autofocus>
+
+            <div class="flex gap-2 items-center">
+                <flux:tooltip content="{{ __('Insert link') }}" class="contents">
+                    <button type="button" data-editor="link:insert" class="p-0.5 text-sm font-medium text-zinc-400 rounded-sm [[data-flux-editor-link]:not(:has(input:placeholder-shown))_&:hover]:bg-zinc-200 dark:[[data-flux-editor-link]:not(:has(input:placeholder-shown))_&:hover]:bg-white/10 [[data-flux-editor-link]:not(:has(input:placeholder-shown))_&]:text-zinc-800 dark:[[data-flux-editor-link]:not(:has(input:placeholder-shown))_&]:text-white">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 shrink-0" aria-hidden="true"> <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" /> </svg> <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" /> </svg>
+                    </button>
+                </flux:tooltip>
+
+                <flux:tooltip content="{{ __('Unlink') }}" class="contents">
+                    <button type="button" data-editor="link:unlink" class="p-0.5 text-sm font-medium text-zinc-400 rounded-sm [[data-flux-editor-link]:not(:has(input:placeholder-shown))_&:hover]:bg-zinc-200 dark:[[data-flux-editor-link]:not(:has(input:placeholder-shown))_&:hover]:bg-white/10 [[data-flux-editor-link]:not(:has(input:placeholder-shown))_&]:text-zinc-800 dark:[[data-flux-editor-link]:not(:has(input:placeholder-shown))_&]:text-white">
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0" aria-hidden="true"> <g clip-path="url(#clip0_1014_3807)"> <path d="M15.7 10.2082L17.1334 8.78317H17.1167C17.8839 7.9882 18.3042 6.92127 18.2855 5.81664C18.2668 4.71202 17.8104 3.65997 17.0167 2.8915C16.2391 2.14166 15.2011 1.72266 14.1209 1.72266C13.0407 1.72266 12.0026 2.14166 11.225 2.8915L9.79169 4.3165" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4.30834 9.79102L2.88334 11.216C2.11615 12.011 1.69578 13.0779 1.71453 14.1825C1.73328 15.2872 2.18961 16.3392 2.98334 17.1077C3.76089 17.8575 4.79898 18.2765 5.87918 18.2765C6.95938 18.2765 7.99747 17.8575 8.77501 17.1077L10.2 15.6827" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.66669 1.66602V4.16602" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.66669 6.66602H4.16669" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.3333 15.834V18.334" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.8333 13.334H18.3333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g> <defs> <clipPath id="clip0_1014_3807"> <rect width="20" height="20" fill="white"/> </clipPath> </defs> </svg>
+                    </button>
+                </flux:tooltip>
+            </div>
+        </div>
+    </div>
+</flux:dropdown>
--- a/resources/views/flux/editor/option.blade.php
+++ b/resources/views/flux/editor/option.blade.php
@@ -0,0 +1,5 @@
+@blaze
+
+<ui-option {{ $attributes }} class="h-8 px-2 flex items-center gap-2 rounded-lg text-sm font-medium text-zinc-800 dark:text-white data-active:bg-zinc-50 dark:data-active:bg-zinc-600 [&>svg]:text-zinc-400 [&[data-active]>svg]:text-zinc-800 dark:[&[data-active]>svg]:text-white">
+    {{ $slot }}
+</ui-option>
--- a/resources/views/flux/editor/ordered.blade.php
+++ b/resources/views/flux/editor/ordered.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<flux:tooltip content="{{ __('Ordered list') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="ordered">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M8.33334 10H17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.33334 15H17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.33334 5H17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.33334 8.33398H5.00001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.33334 5H4.16668V8.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.00001 15.0007H3.33334C3.33334 14.1674 5.00001 13.334 5.00001 12.5007C5.00001 11.6674 4.16668 11.2507 3.33334 11.6674" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/redo.blade.php
+++ b/resources/views/flux/editor/redo.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘+Shift+Z',
+])
+
+<flux:tooltip content="{{ __('Redo') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="redo">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/scripts.blade.php
+++ b/resources/views/flux/editor/scripts.blade.php
@@ -0,0 +1,2 @@
+
+{!! app('flux')->editorScripts() !!}
--- a/resources/views/flux/editor/separator.blade.php
+++ b/resources/views/flux/editor/separator.blade.php
@@ -0,0 +1,3 @@
+@blaze
+
+<div data-orientation="vertical" role="none" class="h-4 border-0 bg-zinc-200 dark:bg-white/20 w-px"></div>
--- a/resources/views/flux/editor/spacer.blade.php
+++ b/resources/views/flux/editor/spacer.blade.php
@@ -0,0 +1,3 @@
+@blaze
+
+<div class="flex-1" role="none"></div>
--- a/resources/views/flux/editor/strike.blade.php
+++ b/resources/views/flux/editor/strike.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘+Shift+S',
+])
+
+<flux:tooltip content="{{ __('Strikethrough') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="strike">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"> <path fill-rule="evenodd" d="M11.617 3.963c-1.186-.318-2.418-.323-3.416.015-.992.336-1.49.91-1.642 1.476-.152.566-.007 1.313.684 2.1.528.6 1.273 1.1 2.128 1.446h7.879a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5h3.813a5.976 5.976 0 0 1-.447-.456C5.18 7.479 4.798 6.231 5.11 5.066c.312-1.164 1.268-2.055 2.61-2.509 1.336-.451 2.877-.42 4.286-.043.856.23 1.684.592 2.409 1.074a.75.75 0 1 1-.83 1.25 6.723 6.723 0 0 0-1.968-.875Zm1.909 8.123a.75.75 0 0 1 1.015.309c.53.99.607 2.062.18 3.01-.421.94-1.289 1.648-2.441 2.038-1.336.452-2.877.42-4.286.043-1.409-.377-2.759-1.121-3.69-2.18a.75.75 0 1 1 1.127-.99c.696.791 1.765 1.403 2.952 1.721 1.186.318 2.418.323 3.416-.015.853-.288 1.34-.756 1.555-1.232.21-.467.205-1.049-.136-1.69a.75.75 0 0 1 .308-1.014Z" clip-rule="evenodd" /> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/styles.blade.php
+++ b/resources/views/flux/editor/styles.blade.php
@@ -0,0 +1,2 @@
+
+{!! app('flux')->editorStyles() !!}
--- a/resources/views/flux/editor/subscript.blade.php
+++ b/resources/views/flux/editor/subscript.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<flux:tooltip content="{{ __('Subscript') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="subscript">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07"/></svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/superscript.blade.php
+++ b/resources/views/flux/editor/superscript.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => null,
+])
+
+<flux:tooltip content="{{ __('Superscript') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="superscript">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06"/></svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/toolbar.blade.php
+++ b/resources/views/flux/editor/toolbar.blade.php
@@ -0,0 +1,50 @@
+@aware(['variant' => null])
+
+@props([
+    'items' => null,
+    'variant' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('block overflow-x-auto w-full')
+    ->add(match($variant) {
+        'borderless' => 'rounded-lg bg-zinc-100 dark:bg-white/10 *:p-1.5 *:h-auto',
+        default => [
+            'bg-zinc-50 dark:bg-white/[6%] dark:border-white/5',
+            'rounded-t-[calc(0.5rem-1px)]',
+            'border-b border-zinc-200 dark:border-white/10',
+        ]
+    })
+;
+@endphp
+
+<ui-toolbar {{ $attributes->class($classes) }} wire:ignore aria-label="{{ __('Formatting') }}">
+    <div class="h-10 p-2 flex gap-2 items-center">
+        <?php if ($slot->isNotEmpty()): ?>
+            {{ $slot }}
+        <?php else: ?>
+            <?php if ($items !== null): ?>
+                <?php foreach (str($items)->explode(' ') as $item): ?>
+                    <?php if ($item === '|') $item = 'separator'; ?>
+                    <?php if ($item === '~') $item = 'spacer'; ?>
+                    <flux:delegate-component :component="'editor.' . $item"></flux:delegate-component>
+                <?php endforeach; ?>
+            <?php else: ?>
+                <flux:editor.heading />
+                <flux:editor.separator />
+                <flux:editor.bold />
+                <flux:editor.italic />
+                <flux:editor.strike />
+                <flux:editor.separator />
+                <flux:editor.bullet />
+                <flux:editor.ordered />
+                <flux:editor.blockquote />
+                <flux:editor.separator />
+                <flux:editor.link />
+                <flux:editor.separator />
+                <flux:editor.align />
+            <?php endif; ?>
+        <?php endif; ?>
+    </div>
+</ui-toolbar>
--- a/resources/views/flux/editor/underline.blade.php
+++ b/resources/views/flux/editor/underline.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘U',
+])
+
+<flux:tooltip content="{{ __('Underline') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="underline">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true"> <path fill-rule="evenodd" d="M4.75 2a.75.75 0 0 1 .75.75V9a4.5 4.5 0 1 0 9 0V2.75a.75.75 0 0 1 1.5 0V9A6 6 0 0 1 4 9V2.75A.75.75 0 0 1 4.75 2ZM2 17.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> </svg>
+    </flux:editor.button>
+</flux:tooltip>
--- a/resources/views/flux/editor/undo.blade.php
+++ b/resources/views/flux/editor/undo.blade.php
@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'kbd' => '⌘Z',
+])
+
+<flux:tooltip content="{{ __('Undo') }}" :$kbd class="contents">
+    <flux:editor.button data-editor="undo">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>
+    </flux:editor.button>
+</flux:tooltip>