From 333986d171334db5fda96602940a23b057cb0239 Mon Sep 17 00:00:00 2001
From: bernard-ng <ngandubernard@gmail.com>
Date: Fri, 17 Oct 2025 22:27:54 +0200
Subject: [PATCH] [Toolkit][Shadcn] Add Spinner component

---
 src/Toolkit/kits/shadcn/spinner/EXAMPLES.md   | 32 +++++++++++++++++++
 src/Toolkit/kits/shadcn/spinner/manifest.json | 12 +++++++
 .../templates/components/Spinner.html.twig    |  9 ++++++
 ... shadcn, component spinner, code 1__1.html | 13 ++++++++
 ... shadcn, component spinner, code 2__1.html | 23 +++++++++++++
 ... shadcn, component spinner, code 3__1.html | 26 +++++++++++++++
 6 files changed, 115 insertions(+)
 create mode 100644 src/Toolkit/kits/shadcn/spinner/EXAMPLES.md
 create mode 100644 src/Toolkit/kits/shadcn/spinner/manifest.json
 create mode 100644 src/Toolkit/kits/shadcn/spinner/templates/components/Spinner.html.twig
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 1__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 2__1.html
 create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 3__1.html

diff --git a/src/Toolkit/kits/shadcn/spinner/EXAMPLES.md b/src/Toolkit/kits/shadcn/spinner/EXAMPLES.md
new file mode 100644
index 00000000000..2b622947f05
--- /dev/null
+++ b/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>
+```
diff --git a/src/Toolkit/kits/shadcn/spinner/manifest.json b/src/Toolkit/kits/shadcn/spinner/manifest.json
new file mode 100644
index 00000000000..f271630d517
--- /dev/null
+++ b/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"]
+    }
+}
diff --git a/src/Toolkit/kits/shadcn/spinner/templates/components/Spinner.html.twig b/src/Toolkit/kits/shadcn/spinner/templates/components/Spinner.html.twig
new file mode 100644
index 00000000000..7229f2d053d
--- /dev/null
+++ b/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'),
+}) }}
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 1__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 1__1.html
new file mode 100644
index 00000000000..b1c8738b794
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 2__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 2__1.html
new file mode 100644
index 00000000000..9e130f4d021
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 3__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component spinner, code 3__1.html
new file mode 100644
index 00000000000..9274bef9320
--- /dev/null
+++ b/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>
\ No newline at end of file