[Toolkit] Rework kits architecture

Author: Kocal

src/Toolkit/doc/index.rst

@@ -0,0 +1,7 @@
+<twig:Alert class="max-w-lg">
+    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
+    <twig:Alert:Title>Heads up!</twig:Alert:Title>
+    <twig:Alert:Description>
+        You can add components to your app using the cli.
+    </twig:Alert:Description>
+</twig:Alert>

src/Toolkit/kits/shadcn/Alert/examples/Default.html.twig

@@ -0,0 +1,7 @@
+<twig:Alert variant="destructive" class="max-w-lg">
+    <twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
+    <twig:Alert:Title>Error</twig:Alert:Title>
+    <twig:Alert:Description>
+        Your session has expired. Please log in again.
+    </twig:Alert:Description>
+</twig:Alert>

src/Toolkit/kits/shadcn/Alert/examples/Destructive.html.twig

@@ -1,5 +1,7 @@
 {
-    "$schema": "../../../../schemas/component.json",
+    "$schema": "../../../schemas/component.json",
+    "name": "Alert",
+    "description": "A notification component that displays important messages with an icon, title, and description.",
     "dependencies": [
         {
             "type": "php",
@@ -14,4 +16,4 @@
             "package": "tales-from-a-dev/twig-tailwind-extra"
         }
     ]
-}
+}

src/Toolkit/kits/shadcn/templates/components/Separator.meta.json renamed to src/Toolkit/kits/shadcn/Alert/manifest.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../../../schemas/component.json",
+    "name": "AspectRatio",
+    "description": "A container that maintains a specific width-to-height ratio for its content.",
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "twig/extra-bundle"
+        }
+    ]
+}

src/Toolkit/kits/shadcn/templates/components/Alert.html.twig renamed to src/Toolkit/kits/shadcn/Alert/templates/components/Alert.html.twig

@@ -0,0 +1,11 @@
+<div class="flex -space-x-2">
+    <twig:Avatar>
+        <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
+    </twig:Avatar>
+    <twig:Avatar>
+        <twig:Avatar:Text>FP</twig:Avatar:Text>
+    </twig:Avatar>
+    <twig:Avatar>
+        <twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
+    </twig:Avatar>
+</div>