use elegantly/blade-kit

README.md

@@ -251,13 +251,15 @@ Simply put the banner component `<x-cookies-consent::banner />` at the end of yo
 
 #### tailwindcss Requirement
 
-The default banner is styled with tailwindcss. You should add the following paths to your tailwind config file:
+The default banner is based on `elegantly/blade-kit` which is styled with tailwindcss.
+You must then add the following paths to your tailwind config file:
 
 ```js
 export default {
     content: [
         // ...
-        "./vendor/elegantly/laravel-cookies-consent/resources/views/**/*.blade.php",
+        "./vendor/elegantly/blade-kit/resources/views/**/*.blade.php",
+        "./vendor/elegantly/blade-kit/src/Ui/**/*.php",
     ],
     // ...
 };

composer.json

@@ -18,8 +18,9 @@
     ],
     "require": {
         "php": "^8.2",
-        "spatie/laravel-package-tools": "^1.16",
-        "illuminate/contracts": "^10.0||^11.0"
+        "elegantly/blade-kit": "^0.0.1",
+        "illuminate/contracts": "^10.0||^11.0",
+        "spatie/laravel-package-tools": "^1.16"
     },
     "require-dev": {
         "laravel/pint": "^1.14",

resources/views/components/banner.blade.php

@@ -128,24 +128,24 @@
                 @endif
             </p>
             <div class="grid grid-cols-2 gap-1">
-                <x-cookies-consent::button class="justify-center rounded-md font-semibold" x-on:click="acceptEssentials">
+                <x-kit::button color="white" class="justify-center rounded-md font-semibold"
+                    x-on:click="acceptEssentials">
                     {{ __('cookies-consent::cookies.accept_required') }}
-                </x-cookies-consent::button>
+                </x-kit::button>
 
-                <x-cookies-consent::button color="black" class="justify-center rounded-md font-semibold"
-                    x-on:click="acceptAll">
+                <x-kit::button color="black" class="justify-center rounded-md font-semibold" x-on:click="acceptAll">
                     {{ __('cookies-consent::cookies.accept_all') }}
-                </x-cookies-consent::button>
+                </x-kit::button>
 
-                <x-cookies-consent::button x-show="!expanded" class="col-span-2 justify-center rounded-md font-semibold"
-                    x-on:click="expanded = !expanded">
+                <x-kit::button color="white" x-show="!expanded"
+                    class="col-span-2 justify-center rounded-md font-semibold" x-on:click="expanded = !expanded">
                     {{ __('cookies-consent::cookies.customize') }}
-                </x-cookies-consent::button>
+                </x-kit::button>
 
-                <x-cookies-consent::button color="black" x-show="expanded" x-cloak
+                <x-kit::button color="black" x-show="expanded" x-cloak
                     class="col-span-2 justify-center rounded-md font-semibold" x-on:click="save">
                     {{ __('cookies-consent::cookies.save') }}
-                </x-cookies-consent::button>
+                </x-kit::button>
             </div>
         </div>
         <div x-show="expanded" x-collapse x-cloak>
@@ -157,10 +157,8 @@ class="col-span-2 justify-center rounded-md font-semibold" x-on:click="save">
                                 {{ $group->name }}
                             </p>
 
-                            <label class="relative block" for="consents.{{ $group->key }}">
-                                <x-cookies-consent::toggle id="consents.{{ $group->key }}"
-                                    x-model="consents.{{ $group->key }}" :disabled="$group->required" />
-                            </label>
+                            <x-kit::switch id="consents.{{ $group->key }}" x-model="consents.{{ $group->key }}"
+                                :disabled="$group->required" />
                         </div>
 
                         <p class="mb-1 text-black/50 dark:text-white/50">
@@ -192,10 +190,9 @@ class="col-span-2 justify-center rounded-md font-semibold" x-on:click="save">
                 @endforeach
             </div>
             <div class="border-t p-4 dark:border-white/20">
-                <x-cookies-consent::button color="black" class="w-full justify-center rounded-md font-semibold"
-                    x-on:click="save">
+                <x-kit::button color="black" class="w-full justify-center rounded-md font-semibold" x-on:click="save">
                     {{ __('cookies-consent::cookies.save') }}
-                </x-cookies-consent::button>
+                </x-kit::button>
             </div>
 
         </div>