Expand Card and Dropdown APIs for package consumers

resources/views/card.blade.php

@@ -1,8 +1,8 @@
-<div {{ $attributes }}>
+<{{ $tag }} {{ $attributes }}>
     @isset($figure)<figure>{{ $figure }}</figure>@endisset
     <div class="{{ $viewClasses['body'] }}">
         @if ($title)<h2 class="{{ $viewClasses['title'] }}">{{ $title }}</h2>@endif
         {{ $slot }}
         @isset($actions)<div class="{{ $viewClasses['actions'] }}">{{ $actions }}</div>@endisset
     </div>
-</div>
+</{{ $tag }}>

src/Components/Card.php

@@ -8,13 +8,28 @@ class Card extends DaisyComponent
 {
     protected const VIEW = 'lazy::card';
 
+    public string $tag;
+
     public function __construct(
         public string $title = '',
         public bool $bordered = false,
         public bool $compact = false,
         public bool $side = false,
         public bool $imageFull = false,
-    ) {}
+        public ?string $href = null,
+        public bool $hover = false,
+    ) {
+        $this->tag = $this->href === null ? 'div' : 'a';
+    }
+
+    protected function prepareAttributes(ComponentAttributeBag $attributes): ComponentAttributeBag
+    {
+        if ($this->href !== null) {
+            $attributes['href'] = $this->href;
+        }
+
+        return $attributes;
+    }
 
     protected function viewClasses(): array
     {
@@ -33,6 +48,7 @@ protected function componentClasses(array $data, ComponentAttributeBag $attribut
             'card-sm' => $this->compact,
             'card-side' => $this->side,
             'image-full' => $this->imageFull,
+            'transition hover:shadow-md' => $this->hover || $this->href !== null,
         ];
     }
 }

src/Components/Dropdown.php

@@ -10,6 +10,10 @@ class Dropdown extends DaisyComponent
 
     public function __construct(
         public string $label = 'Menu',
+        public string $position = '',
+        public string $width = 'w-52',
+        public string $contentClass = '',
+        public bool $contentDefaults = true,
         public bool $hover = false,
         public bool $open = false,
         public bool $close = false,
@@ -26,24 +30,31 @@ protected function viewClasses(): array
     {
         return [
             'trigger' => 'btn',
-            'content' => 'dropdown-content menu bg-base-100 rounded-box z-10 mt-2 w-52 p-2 shadow-sm',
+            'content' => $this->classes([
+                'dropdown-content',
+                'menu bg-base-100 rounded-box z-10 mt-2 p-2 shadow-sm' => $this->contentDefaults,
+                $this->width => $this->width !== '',
+                $this->contentClass => $this->contentClass !== '',
+            ]),
         ];
     }
 
     protected function componentClasses(array $data, ComponentAttributeBag $attributes): array
     {
+        $position = $this->position;
+
         return [
             'dropdown',
             'dropdown-hover' => $this->hover,
             'dropdown-open' => $this->open,
             'dropdown-close' => $this->close,
-            'dropdown-start' => $this->start,
-            'dropdown-center' => $this->center,
-            'dropdown-end' => $this->end,
-            'dropdown-top' => $this->top,
-            'dropdown-bottom' => $this->bottom,
-            'dropdown-left' => $this->left,
-            'dropdown-right' => $this->right,
+            'dropdown-start' => $this->start || $position === 'start',
+            'dropdown-center' => $this->center || $position === 'center',
+            'dropdown-end' => $this->end || $position === 'end',
+            'dropdown-top' => $this->top || $position === 'top',
+            'dropdown-bottom' => $this->bottom || $position === 'bottom',
+            'dropdown-left' => $this->left || $position === 'left',
+            'dropdown-right' => $this->right || $position === 'right',
         ];
     }
 }

tests/Components/DaisyUiIntegrationTest.php

@@ -520,3 +520,34 @@
         ->assertSee('id="settings-drawer"', false)
         ->assertSee('for="settings-drawer"', false);
 });
+
+it('supports reusable dropdown positioning and content customization', function () {
+    $this
+        ->blade('<x-lazy-dropdown position="end" width="w-56" content-class="max-h-96 overflow-y-auto" label="Language">Item</x-lazy-dropdown>')
+        ->assertSee('dropdown-end')
+        ->assertSee('w-56')
+        ->assertSee('max-h-96')
+        ->assertSee('overflow-y-auto')
+        ->assertSee('Language')
+        ->assertSee('Item');
+
+    $this
+        ->blade('<x-lazy-dropdown end :content-defaults="false" width="w-80" content-class="bg-base-200 shadow-2xl">Panel</x-lazy-dropdown>')
+        ->assertSee('dropdown-end')
+        ->assertSee('dropdown-content')
+        ->assertSee('w-80')
+        ->assertSee('bg-base-200')
+        ->assertSee('shadow-2xl')
+        ->assertDontSee('bg-base-100');
+});
+
+it('supports linked and hoverable cards for admin navigation', function () {
+    $this
+        ->blade('<x-lazy-card href="/admin/users" hover title="Users">42</x-lazy-card>')
+        ->assertSee('<a', false)
+        ->assertSee('href="/admin/users"', false)
+        ->assertSee('hover:shadow-md', false)
+        ->assertSee('card-title')
+        ->assertSee('Users')
+        ->assertSee('42');
+});