v4.2.0

app/Enums/Examples/Ai.php

@@ -33,29 +33,4 @@ class Ai
         }
     }
     HTML;
-
-    public const string CURSOR_PROJECT = <<<'HTML'
-    {
-        "mcpServers": {
-            "tallstackui": {
-                "type": "http",
-                "url": "https://tallstackui.com/mcp/tallstackui"
-            }
-        }
-    }
-    HTML;
-
-    public const string GEMINI_CLI = <<<'HTML'
-    gemini mcp add --transport http tallstackui https://tallstackui.com/mcp/tallstackui
-    HTML;
-
-    public const string GEMINI_SETTINGS = <<<'HTML'
-    {
-        "mcpServers": {
-            "tallstackui": {
-                "httpUrl": "https://tallstackui.com/mcp/tallstackui"
-            }
-        }
-    }
-    HTML;
 }

app/Enums/Examples/Form/Checkbox.php

@@ -98,10 +98,6 @@ class Checkbox
     ]" />
     HTML;
 
-    public const string GROUP_PROPERTY = <<<'PHP'
-    public array $features = [];
-    PHP;
-
     public const string GROUP_VARIATIONS = <<<'HTML'
     <x-checkbox.group list :options="$features" />
     <x-checkbox.group card :options="$features" />

app/Enums/Examples/Form/Date.php

@@ -36,13 +36,25 @@ class Date
     $date; // 2024-02-20
     HTML;
 
+    public const string TYPEABLE = <<<'HTML'
+    <x-date typeable />
+    HTML;
+
+    public const string TYPEABLE_FORMAT = <<<'HTML'
+    <x-date format="DD/MM/YYYY" typeable />
+    HTML;
+
+    public const string TYPEABLE_MIN_DATE = <<<'HTML'
+    <!-- A typed date before today restores the previous value on blur -->
+
+    <x-date format="DD/MM/YYYY" :min-date="today()" typeable />
+    HTML;
+
     public const string HELPERS = <<<'HTML'
     <x-date helpers />
     HTML;
 
     public const string MIN_MAX_DATES = <<<'HTML'
-    <!-- You can use dates as strings or Carbon instances -->
-
     <x-date :min-date="now()->subWeek()" :max-date="now()->addWeek()" />
     HTML;
 

app/Enums/Examples/Form/Range.php

@@ -14,6 +14,14 @@ class Range
     <x-range label="Quantity" hint="Select an average desired salary" />
     HTML;
 
+    public const string DUAL = <<<'HTML'
+    <x-range dual :min="0" :max="1000" :step="10" label="Price range" />
+    HTML;
+
+    public const string DUAL_TOOLTIP = <<<'HTML'
+    <x-range dual :min="0" :max="1000" color="emerald" tooltip />
+    HTML;
+
     public const string READONLY_DISABLED = <<<'HTML'
     <x-range label="Readonly" value="50" readonly />
     <x-range label="Disabled" value="50" disabled />

app/Enums/Examples/Ui/Badge.php

@@ -56,6 +56,13 @@ class Badge
     <x-badge text="LG" lg />
     HTML;
 
+    public const string SIZES_CONFIG = <<<'HTML'
+    <!-- With 'size' => 'md' in the configuration file -->
+    <x-badge text="Medium" />
+
+    <x-badge text="Small" sm />
+    HTML;
+
     public const string COLORS = <<<'HTML'
     <x-badge text="Primary" />
     <x-badge text="Secondary" color="secondary" />

app/Enums/Examples/Ui/Button.php

@@ -412,11 +412,95 @@ class Button
     <x-button.circle icon="bookmark" color="black" flat />
     HTML;
 
+    public const string SUBTLE = <<<'HTML'
+    <x-button text="Primary" subtle />
+    <x-button text="Secondary" color="secondary" subtle />
+    <x-button text="Slate" color="slate" subtle />
+    <x-button text="Gray" color="gray" subtle />
+    <x-button text="Zinc" color="zinc" subtle />
+    <x-button text="Neutral" color="neutral" subtle />
+    <x-button text="Stone" color="stone" subtle />
+    <x-button text="Red" color="red" subtle />
+    <x-button text="Orange" color="orange" subtle />
+    <x-button text="Amber" color="amber" subtle />
+    <x-button text="Yellow" color="yellow" subtle />
+    <x-button text="Lime" color="lime" subtle />
+    <x-button text="Green" color="green" subtle />
+    <x-button text="Emerald" color="emerald" subtle />
+    <x-button text="Teal" color="teal" subtle />
+    <x-button text="Cyan" color="cyan" subtle />
+    <x-button text="Sky" color="sky" subtle />
+    <x-button text="Blue" color="blue" subtle />
+    <x-button text="Indigo" color="indigo" subtle />
+    <x-button text="Violet" color="violet" subtle />
+    <x-button text="Purple" color="purple" subtle />
+    <x-button text="Fuchsia" color="fuchsia" subtle />
+    <x-button text="Pink" color="pink" subtle />
+    <x-button text="Rose" color="rose" subtle />
+    <x-button text="Mauve" color="mauve" subtle />
+    <x-button text="Olive" color="olive" subtle />
+    <x-button text="Mist" color="mist" subtle />
+    <x-button text="Taupe" color="taupe" subtle />
+    <x-button text="Black" color="black" subtle />
+    HTML;
+
+    public const string SUBTLE_TINTED = <<<'HTML'
+    <!-- Gray hover, whatever the color -->
+    <x-button text="Delete" color="red" subtle icon="trash" />
+
+    <!-- Hover tinted with the color -->
+    <x-button text="Delete" color="red" subtle tinted icon="trash" />
+    HTML;
+
     public const string UNFOCUS = <<<'HTML'
     <x-button text="With Focus" />
     <x-button text="Without Focus" unfocus />
     HTML;
 
+    public const string UNFOCUS_CONFIG = <<<'HTML'
+    <!-- With 'unfocus' => true in the configuration file -->
+    <x-button text="Quiet" />
+
+    <x-button text="Normal" :unfocus="false" />
+    HTML;
+
+    public const string CIRCLE_SUBTLE = <<<'HTML'
+    <x-button.circle icon="bookmark" subtle />
+    <x-button.circle icon="bookmark" color="secondary" subtle />
+    <x-button.circle icon="bookmark" color="slate" subtle />
+    <x-button.circle icon="bookmark" color="gray" subtle />
+    <x-button.circle icon="bookmark" color="zinc" subtle />
+    <x-button.circle icon="bookmark" color="neutral" subtle />
+    <x-button.circle icon="bookmark" color="stone" subtle />
+    <x-button.circle icon="bookmark" color="red" subtle />
+    <x-button.circle icon="bookmark" color="orange" subtle />
+    <x-button.circle icon="bookmark" color="amber" subtle />
+    <x-button.circle icon="bookmark" color="yellow" subtle />
+    <x-button.circle icon="bookmark" color="lime" subtle />
+    <x-button.circle icon="bookmark" color="green" subtle />
+    <x-button.circle icon="bookmark" color="emerald" subtle />
+    <x-button.circle icon="bookmark" color="teal" subtle />
+    <x-button.circle icon="bookmark" color="cyan" subtle />
+    <x-button.circle icon="bookmark" color="sky" subtle />
+    <x-button.circle icon="bookmark" color="blue" subtle />
+    <x-button.circle icon="bookmark" color="indigo" subtle />
+    <x-button.circle icon="bookmark" color="violet" subtle />
+    <x-button.circle icon="bookmark" color="purple" subtle />
+    <x-button.circle icon="bookmark" color="fuchsia" subtle />
+    <x-button.circle icon="bookmark" color="pink" subtle />
+    <x-button.circle icon="bookmark" color="rose" subtle />
+    <x-button.circle icon="bookmark" color="mauve" subtle />
+    <x-button.circle icon="bookmark" color="olive" subtle />
+    <x-button.circle icon="bookmark" color="mist" subtle />
+    <x-button.circle icon="bookmark" color="taupe" subtle />
+    <x-button.circle icon="bookmark" color="black" subtle />
+    HTML;
+
+    public const string CIRCLE_SUBTLE_TINTED = <<<'HTML'
+    <x-button.circle icon="pencil" subtle />
+    <x-button.circle icon="trash" color="red" subtle tinted />
+    HTML;
+
     public const string CIRCLE_UNFOCUS = <<<'HTML'
     <x-button.circle icon="x-mark" color="secondary" sm />
     <x-button.circle icon="x-mark" color="secondary" sm unfocus />
@@ -450,6 +534,14 @@ class Button
         ->block('block', 'classes');
     HTML;
 
+    public const string GROUP_SHADOWLESS = <<<'HTML'
+    <x-button.group shadowless>
+        <x-button text="Years" subtle color="secondary" sm />
+        <x-button text="Months" subtle color="secondary" sm />
+        <x-button text="Days" subtle color="secondary" sm />
+    </x-button.group>
+    HTML;
+
     public const string CUSTOMIZATION_GROUP = <<<'HTML'
     TallStackUi::customize()
         ->button('group')

app/Enums/Examples/Ui/Carousel.php

@@ -30,8 +30,6 @@ class Carousel
     ]" round />
 
     <!--
-    also accept other types of "round":
-
     default => rounded-xl,
     xs      => rounded-xs,
     sm      => rounded-sm,
@@ -104,6 +102,64 @@ class Carousel
     ]" without-indicators />
     HTML;
 
+    public const string THUMBNAILS = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+    ]" thumbnails />
+    HTML;
+
+    public const string THUMBNAILS_LIMIT = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+        ['src' => url('assets/images/wallpapers/4.jpg'), 'alt' => 'Wallpaper 4'],
+        ['src' => url('assets/images/wallpapers/5.jpg'), 'alt' => 'Wallpaper 5'],
+        ['src' => url('assets/images/wallpapers/6.jpg'), 'alt' => 'Wallpaper 6'],
+        ['src' => url('assets/images/wallpapers/7.jpg'), 'alt' => 'Wallpaper 7'],
+        ['src' => url('assets/images/wallpapers/8.jpg'), 'alt' => 'Wallpaper 8'],
+        ['src' => url('assets/images/wallpapers/9.jpg'), 'alt' => 'Wallpaper 9'],
+    ]" thumbnails :limit="5" round="xl" />
+    HTML;
+
+    public const string THUMBNAILS_WITHOUT_HIGHLIGHT = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+    ]" thumbnails without-highlight />
+    HTML;
+
+    public const string THUMBNAILS_AUTOPLAY = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+    ]" thumbnails autoplay :interval="5" stop-on-hover>
+        <x-slot:footer>
+            <p class="mt-2 text-sm text-gray-500">Click a thumbnail to jump to that photo.</p>
+        </x-slot:footer>
+    </x-carousel>
+    HTML;
+
+    public const string THUMBNAILS_CONFIGURATION = <<<'PHP'
+    // ...
+
+    'carousel' => [
+        Components\Carousel\Component::class,
+        [
+            // ...
+            'thumbnails' => true, // [tl! focus:2]
+            'limit' => 6,
+            'without-highlight' => false,
+        ],
+    ],
+
+    // ...
+    PHP;
+
     public const string TITLE_DESCRIPTION = <<<'HTML'
     <x-carousel :images="[
         [

app/Enums/Examples/Ui/Editor.php

@@ -64,6 +64,11 @@ class Editor
     <x-editor :toolbar="['style', 'bold', 'italic', 'link', 'image']" />
     HTML;
 
+    public const string TOOLBAR_TOOLTIP = <<<'HTML'
+    <!-- With 'toolbar_tooltip' => false in the configuration file -->
+    <x-editor />
+    HTML;
+
     public const string HEIGHTS = <<<'HTML'
     <x-editor min-height="20rem" max-height="60vh" />
     HTML;
@@ -82,14 +87,6 @@ class Editor
     <x-editor markdown />
     HTML;
 
-    public const string NATIVE = <<<'HTML'
-    <form method="POST" action="{{ route('posts.store') }}">
-        @csrf
-        <x-editor name="body" label="Body" />
-        <x-button type="submit" text="Save" />
-    </form>
-    HTML;
-
     public const string UPLOAD_BLADE = <<<'HTML'
     <x-editor upload-property="picture" upload-method="storeImage" />
     HTML;
@@ -121,11 +118,6 @@ public function storeImage(): string
               x-on:editor:fullscreen-toggled="console.log($event.detail.on)" />
     HTML;
 
-    public const string LIVEWIRE = <<<'HTML'
-    <!-- The component is wire:ignore, so a runtime attribute change needs a wire:key -->
-    <x-editor :readonly="$locked" wire:key="editor-{{ $locked ? 'locked' : 'open' }}" />
-    HTML;
-
     public const string SCOPES = <<<'PHP'
     // The two dialogs are <x-modal> instances under a fixed scope
     TallStackUi::customize('modal', scope: 'editor.modal.link')

app/Enums/Examples/Ui/Gallery.php

@@ -98,12 +98,6 @@ class="max-w-md" />
                x-on:previous="console.log($event.detail.current)" />
     HTML;
 
-    public const string PERFORMANCE = <<<'HTML'
-    TallStackUi::customize()
-        ->gallery()
-        ->block('tile.performance', '');
-    HTML;
-
     public const string CUSTOMIZATION = <<<'HTML'
     TallStackUi::customize()
         ->gallery()

app/Enums/Examples/Ui/Layout.php

@@ -91,6 +91,12 @@ class Layout
     </x-layout.header>
     HTML;
 
+    public const string HEADER_COLLAPSE_ICON = <<<'HTML'
+    <x-layout.header collapse-icon="chevron-double-left">
+        <!-- ... -->
+    </x-layout.header>
+    HTML;
+
     public const string JAVASCRIPT = <<<'HTML'
     <!-- Opening -->
     <button x-on:click="$dispatch('tallstackui-menu-mobile', { status : true })">

composer.json

@@ -16,7 +16,7 @@
     "livewire/livewire": "^4.0",
     "sentry/sentry-laravel": "^4.27",
     "symfony/yaml": "^7.2",
-    "tallstackui/tallstackui": "^4.0",
+    "tallstackui/tallstackui": "^4.2",
     "torchlight/torchlight-laravel": "^0.6"
   },
   "require-dev": {