Tag component prefix (#9)

README.md

@@ -19,7 +19,7 @@ We don't provide a input + label combination component as you'll end up with att
 
 <a name="buttons"></a>
 
-The base button doesn't have any styling; here, we only use the `x-tag`. All other buttons use the `button/button`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.
+The base button doesn't have any styling; here, we only use the `x-rapidez::tag`. All other buttons use the `button/button`, which contains the basic styling for buttons, such as padding, hover effects, and the disabled state. The button variants contain styling for the background and text color. There is only one exception: the `button/slider`, which has more custom styling than the other button variants.
 
 ![](.github/media/buttons.png)
 
@@ -128,16 +128,16 @@ Just like any other Blade component, check out the [Laravel Blade docs](https://
 </x-rapidez::accordion>
 ```
 
-#### x-tag
+#### Tag
 
 It is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
 
 ##### Usage
 
 ```blade
-<x-tag is="span" class="font-bold">
+<x-rapidez::tag is="span" class="font-bold">
     Something
-</x-tag>
+</x-rapidez::tag>
 ```
 
 which will result in

demo/components.html

@@ -193,29 +193,22 @@ <h2 class="font-bold text-lg">Button components</h2>
             <div class="grid grid-cols-5 gap-5">
                 <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed">
     Button
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text">
     Primary
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text">
     Secondary
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
     Outline
-</button>
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text">
+</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text">
     Conversion
-</button>
-                <div class="flex flex-col gap-2">
+</button>                <div class="flex flex-col gap-2">
                     <strong>Slider:</strong>
                     <div class="flex items-center gap-2">
                         <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
     &lt;
-</button>
-                        <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
+</button>                        <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
     &gt;
-</button>
-                    </div>
+</button>                    </div>
                 </div>
             </div>
 

resources/views/components/button/base.blade.php

@@ -25,6 +25,6 @@
     $tag = $attributes->has('for') ? 'label' : $tag;
 @endphp
 
-<x-tag is="{{ $tag }}" {{ $attributes }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes }}>
     {{ $slot }}
-</x-tag>
+</x-rapidez::tag>