Add controlled Swap and rich Collapse APIs

resources/views/collapse.blade.php

@@ -1,4 +1,10 @@
 <details {{ $attributes }} @if ($open) open @endif>
-    <summary class="{{ $viewClasses['title'] }}">{{ $title }}</summary>
+    <summary class="{{ $viewClasses['title'] }}">
+        @isset($summary)
+            {{ $summary }}
+        @else
+            {{ $title }}
+        @endisset
+    </summary>
     <div class="{{ $viewClasses['content'] }}">{{ $slot }}</div>
 </details>

resources/views/swap.blade.php

@@ -1,12 +1,14 @@
-<label {{ $attributes }}>
-    <input
-        type="checkbox"
-        @if ($name) name="{{ $name }}" @endif
-        value="{{ $value }}"
-        @checked($checked)
-        @disabled($disabled)
-        {{ $inputAttributes }}
-    />
+<{{ $tag }} {{ $attributes }}>
+    @unless ($controlled)
+        <input
+            type="checkbox"
+            @if ($name) name="{{ $name }}" @endif
+            value="{{ $value }}"
+            @checked($checked)
+            @disabled($disabled)
+            {{ $inputAttributes }}
+        />
+    @endunless
 
     @if ($onLabel !== null)
         <span class="{{ $viewClasses['on'] }}">{{ $onLabel }}</span>
@@ -27,4 +29,4 @@
     @endif
 
     {{ $slot }}
-</label>
+</{{ $tag }}>

src/Components/Collapse.php

@@ -10,6 +10,8 @@ class Collapse extends DaisyComponent
 
     public function __construct(
         public string $title = '',
+        public string $summaryClass = '',
+        public string $contentClass = '',
         public bool $open = false,
         public bool $arrow = true,
         public bool $plus = false,
@@ -18,8 +20,14 @@ public function __construct(
     protected function viewClasses(): array
     {
         return [
-            'title' => 'collapse-title',
-            'content' => 'collapse-content',
+            'title' => $this->classes([
+                'collapse-title',
+                $this->summaryClass => $this->summaryClass !== '',
+            ]),
+            'content' => $this->classes([
+                'collapse-content',
+                $this->contentClass => $this->contentClass !== '',
+            ]),
         ];
     }
 

src/Components/Swap.php

@@ -8,18 +8,23 @@ class Swap extends DaisyComponent
 {
     protected const VIEW = 'lazy::swap';
 
+    public string $tag;
+
     public function __construct(
         public bool $active = false,
         public bool $rotate = false,
         public bool $flip = false,
+        public bool $controlled = false,
         public string $name = '',
         public string $value = '1',
         public bool $checked = false,
         public bool $disabled = false,
         public mixed $onLabel = null,
         public mixed $offLabel = null,
         public mixed $indeterminateLabel = null,
-    ) {}
+    ) {
+        $this->tag = $this->controlled ? 'div' : 'label';
+    }
 
     protected function viewClasses(): array
     {

tests/Components/DaisyUiIntegrationTest.php

@@ -551,3 +551,26 @@
         ->assertSee('Users')
         ->assertSee('42');
 });
+
+it('supports externally controlled swap state for Alpine or other state owners', function () {
+    $this
+        ->blade('<x-lazy-swap controlled rotate x-bind:class="{ \'swap-active\': open }"><x-slot:on>On</x-slot:on><x-slot:off>Off</x-slot:off></x-lazy-swap>')
+        ->assertSee('<div', false)
+        ->assertSee('swap-rotate')
+        ->assertSee('x-bind:class', false)
+        ->assertSee('swap-on')
+        ->assertSee('swap-off')
+        ->assertDontSee('type="checkbox"', false);
+});
+
+it('supports rich collapse summaries and content classes', function () {
+    $this
+        ->blade('<x-lazy-collapse summary-class="text-lg font-semibold" content-class="space-y-5"><x-slot:summary><span>Permissions</span><small>12 total</small></x-slot:summary>Body</x-lazy-collapse>')
+        ->assertSee('collapse-arrow')
+        ->assertSee('text-lg')
+        ->assertSee('font-semibold')
+        ->assertSee('space-y-5')
+        ->assertSee('Permissions')
+        ->assertSee('12 total')
+        ->assertSee('Body');
+});