[Toolkit][Shadcn] Add Spinner component

src/Toolkit/kits/shadcn/spinner/EXAMPLES.md

@@ -0,0 +1,32 @@
+# Examples
+
+## Default
+
+```twig {"preview":true}
+<twig:Button disabled>
+    <twig:Spinner /> Please wait
+</twig:Button>
+```
+
+## Size
+
+```twig {"preview":true}
+<div class="flex items-center gap-6">
+    <twig:Spinner class="size-3" />
+    <twig:Spinner class="size-4" />
+    <twig:Spinner class="size-6" />
+    <twig:Spinner class="size-8" />
+</div>
+```
+
+## Color
+
+```twig {"preview":true}
+<div class="flex items-center gap-6">
+    <twig:Spinner class="size-6 text-red-500" />
+    <twig:Spinner class="size-6 text-green-500" />
+    <twig:Spinner class="size-6 text-blue-500" />
+    <twig:Spinner class="size-6 text-yellow-500" />
+    <twig:Spinner class="size-6 text-purple-500" />
+</div>
+```

src/Toolkit/kits/shadcn/spinner/manifest.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Spinner",
+    "description": "An indicator that can be used to show a loading state.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"]
+    }
+}

src/Toolkit/kits/shadcn/spinner/templates/components/Spinner.html.twig

@@ -0,0 +1,9 @@
+{%- props label = 'Loading' -%}
+
+{{ ux_icon('lucide:loader-2', {
+    'data-slot': 'spinner',
+    'aria-label': label,
+    role: 'status',
+    class: 'size-4 animate-spin ' ~ attributes.render('class')|tailwind_merge,
+    ...attributes.without('class'),
+}) }}

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 1__1.html

@@ -0,0 +1,13 @@
+<!--
+- Kit: Shadcn UI
+- Component: Spinner
+- Code:
+```twig
+<twig:Button disabled>
+    <twig:Spinner /> Please wait
+</twig:Button>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" disabled><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin "><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+ Please wait
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 2__1.html

@@ -0,0 +1,23 @@
+<!--
+- Kit: Shadcn UI
+- Component: Spinner
+- Code:
+```twig
+<div class="flex items-center gap-6">
+    <twig:Spinner class="size-3" />
+    <twig:Spinner class="size-4" />
+    <twig:Spinner class="size-6" />
+    <twig:Spinner class="size-8" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center gap-6">
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-4"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-8"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 3__1.html

@@ -0,0 +1,26 @@
+<!--
+- Kit: Shadcn UI
+- Component: Spinner
+- Code:
+```twig
+<div class="flex items-center gap-6">
+    <twig:Spinner class="size-6 text-red-500" />
+    <twig:Spinner class="size-6 text-green-500" />
+    <twig:Spinner class="size-6 text-blue-500" />
+    <twig:Spinner class="size-6 text-yellow-500" />
+    <twig:Spinner class="size-6 text-purple-500" />
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center gap-6">
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-red-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-green-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-blue-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-yellow-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" data-slot="spinner" aria-label="Loading" role="status" class="size-4 animate-spin size-6 text-purple-500"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
+
+</div>