[Toolkit] Rework kits architecture, change term for "recipe"

bin/ux-toolkit-kit-debug

@@ -22,6 +22,7 @@ use Symfony\Contracts\Service\ServiceProviderInterface;
 use Symfony\UX\Toolkit\Command\DebugKitCommand;
 use Symfony\UX\Toolkit\Kit\KitSynchronizer;
 use Symfony\UX\Toolkit\Kit\KitFactory;
+use Symfony\UX\Toolkit\Recipe\RecipeSynchronizer;
 use Symfony\UX\Toolkit\Registry\GitHubRegistry;
 use Symfony\UX\Toolkit\Registry\LocalRegistry;
 use Symfony\UX\Toolkit\Registry\RegistryFactory;
@@ -46,7 +47,8 @@ if (!class_exists(Application::class)) {
 }
 
 $filesystem = new Filesystem();
-$kitFactory = new KitFactory($filesystem, new KitSynchronizer($filesystem));
+$kitSynchronizer = new KitSynchronizer($filesystem, new RecipeSynchronizer($filesystem));
+$kitFactory = new KitFactory($filesystem, $kitSynchronizer);
 
 (new Application())->add($command = new DebugKitCommand($kitFactory))
     ->getApplication()

config/services.php

@@ -11,11 +11,13 @@
 
 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
 
+use Symfony\UX\Toolkit\Command\CreateKitCommand;
 use Symfony\UX\Toolkit\Command\DebugKitCommand;
-use Symfony\UX\Toolkit\Command\InstallComponentCommand;
+use Symfony\UX\Toolkit\Command\InstallCommand;
 use Symfony\UX\Toolkit\Kit\KitContextRunner;
 use Symfony\UX\Toolkit\Kit\KitFactory;
 use Symfony\UX\Toolkit\Kit\KitSynchronizer;
+use Symfony\UX\Toolkit\Recipe\RecipeSynchronizer;
 use Symfony\UX\Toolkit\Registry\GitHubRegistry;
 use Symfony\UX\Toolkit\Registry\LocalRegistry;
 use Symfony\UX\Toolkit\Registry\RegistryFactory;
@@ -34,7 +36,13 @@ return static function (ContainerConfigurator $container): void {
             ])
             ->tag('console.command')
 
-        ->set('.ux_toolkit.command.install', InstallComponentCommand::class)
+        ->set('.ux_toolkit.command.create_kit', CreateKitCommand::class)
+            ->args([
+                service('filesystem'),
+            ])
+            ->tag('console.command')
+
+        ->set('.ux_toolkit.command.install', InstallCommand::class)
             ->args([
                 service('.ux_toolkit.registry.registry_factory'),
                 service('filesystem'),
@@ -75,6 +83,7 @@ return static function (ContainerConfigurator $container): void {
         ->set('.ux_toolkit.kit.kit_synchronizer', KitSynchronizer::class)
             ->args([
                 service('filesystem'),
+                service('.ux_toolkit.recipe.recipe_synchronizer'),
             ])
 
         ->set('ux_toolkit.kit.kit_context_runner', KitContextRunner::class)
@@ -83,5 +92,7 @@ return static function (ContainerConfigurator $container): void {
                 service('twig'),
                 service('ux.twig_component.component_factory'),
             ])
+
+        ->set('.ux_toolkit.recipe.recipe_synchronizer', RecipeSynchronizer::class)
     ;
 };

doc/index.rst

@@ -7,26 +7,24 @@ to change, or even change drastically.
 Symfony UX Toolkit provides a set of ready-to-use kits for Symfony applications.
 It is part of `the Symfony UX initiative`_.
 
-Kits are a nice way to begin a new Symfony application, by providing a set
-of `Twig components`_ (based on Tailwind CSS, but fully customizable depending
-on your needs).
+Kits are a nice way to begin a new Symfony application, they contains
+recipes to install nicely-crafter `Twig components`_ (already stylized,
+but fully customizable depending on your needs) and more.
 
 Please note that the **UX Toolkit is not a library of UI components**,
 but **a tool to help you build your own UI components**.
 It uses the same approach than the popular `Shadcn UI`_,
 and a similar approach than `Tailwind Plus`_.
 
-After installing the UX Toolkit, you can start pulling the components you need
-from `UX Toolkit Kits`_, and use them in your project.
-They become **your own components**, and **you can customize them as you want**.
+After installing the UX Toolkit, you can start installing the recipes you need
+from `UX Toolkit Kits`_ and use them in your project.
+Files created by the recipes become part of your project, and
+you can customize them as you want.
 
 Additionally, some `Twig components`_ use ``html_cva`` and ``tailwind_merge``,
 you can either remove them from your project or install ``twig/html-extra``
 and ``tales-from-a-dev/twig-tailwind-extra`` to use them.
 
-Also, we do not force you to use Tailwind CSS at all. You can use whatever
-CSS framework you want, but you will need to adapt the UI components to it.
-
 Installation
 ------------
 
@@ -37,27 +35,25 @@ Install the UX Toolkit using Composer and Symfony Flex:
     # The UX Toolkit is a development dependency:
     $ composer require --dev symfony/ux-toolkit
 
-    # If you want to keep `html_cva` and `tailwind_merge` in your Twig components:
-    $ composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra
-
 Usage
 -----
 
-You may find a list of components in the `UX Components page`_, with the installation instructions for each of them.
+You may find a list of available kits in the `UX Toolkit Kits`_ page, with the installation instructions for each of them.
 
 For example, if you want to install a `Button` component, you will find the following instruction:
 
 .. code-block:: terminal
 
-    $ php bin/console ux:toolkit:install-component Button --kit=<kitName>
+    $ php bin/console ux:install Button --kit=<kitName>
 
-It will create the ``templates/components/Button.html.twig`` file, and you will be able to use the `Button` component like this:
+It will create the ``templates/components/Button.html.twig`` file in your project,
+and you will be able to use the `Button` component like this:
 
 .. code-block:: html+twig
 
     <twig:Button>Click me</twig:Button>
 
-Create your own kit
+Create your own Kit
 -------------------
 
 You have the ability to create and share your own kit with the community,
@@ -96,19 +92,55 @@ After creating your kit, the repository should have the following structure:
 .. code-block:: text
 
     .
-    ├── docs
-    │   └── components
-    │       └── Button.twig
-    ├── manifest.json
-    └── templates
-        └── components
-            └── Button.html.twig
+    ├── Button
+    │   ├── manifest.json
+    │   └── templates
+    │       └── components
+    │           └── Button.html.twig
+    └── manifest.json
 
-A kit is composed of:
 
-- A ``manifest.json`` file, that describes the kit (name, license, homepage, authors, ...),
-- A ``templates/components`` directory, that contains the Twig components,
-- A ``docs/components`` directory, optional, that contains the documentation for each "root" Twig component.
+A kit is described by a ``manifest.json`` file at the root directory, which contains the metadata of the kit:
+
+.. code-block:: json
+
+    {
+        "$schema": "../vendor/symfony/ux-toolkit/schema-kit-v1.json",
+        "name": "My UX Toolkit Kit",
+        "description": "A custom kit for Symfony UX Toolkit.",
+        "homepage": "https://github/com/User/MyUxToolkitKit",
+        "license": "MIT"
+    }
+
+Then, a kit can contain one or more recipes. Each recipe is a directory
+with a ``manifest.json`` file and some files to be copied into the project.
+
+The ``manifest.json`` file of a recipe contains the metadata of the recipe:
+
+.. code-block:: json
+
+    {
+        "$schema": "../vendor/symfony/ux-toolkit/schema-kit-recipe-v1.json",
+        "name": "Button",
+        "description": "A clickable element that triggers actions or events, supporting various styles and states.",
+        "copy-files": {
+            "templates/": "templates/"
+        },
+        "dependencies": {
+            {
+                "type": "php",
+                "package": "twig/extra-bundle"
+            },
+            {
+                "type": "php",
+                "package": "twig/html-extra:^3.12.0"
+            },
+            {
+                "type": "php",
+                "package": "tales-from-a-dev/twig-tailwind-extra"
+            }
+        }
+    }
 
 Using your kit
 ~~~~~~~~~~~~~~
@@ -117,10 +149,10 @@ Once your kit is published on GitHub, you can use it by specifying the ``--kit``
 
 .. code-block:: terminal
 
-    $ php bin/console ux:toolkit:install-component Button --kit=github.com/my-username/my-ux-toolkit-kit
+    $ php bin/console ux:install Button --kit=github.com/my-username/my-ux-toolkit-kit
 
     # or for a specific version
-    $ php bin/console ux:toolkit:install-component Button --kit=github.com/my-username/my-ux-toolkit-kit:1.0.0
+    $ php bin/console ux:install Button --kit=github.com/my-username/my-ux-toolkit-kit:1.0.0
 
 Backward Compatibility promise
 ------------------------------

kits/shadcn/Alert/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Alert
+# Examples
 
-A notification component that displays important messages with an icon, title, and description.
+## Default
 
 ```twig {"preview":true}
 <twig:Alert class="max-w-lg">
@@ -12,29 +12,7 @@ A notification component that displays important messages with an icon, title, a
 </twig:Alert>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<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>
-```
-
-### Destructive
+## Destructive
 
 ```twig {"preview":true}
 <twig:Alert variant="destructive" class="max-w-lg">

kits/shadcn/Alert/manifest.json

@@ -1,5 +1,11 @@
 {
-    "$schema": "../../../../schemas/component.json",
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Alert",
+    "description": "A notification component that displays important messages with an icon, title, and description.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
     "dependencies": [
         {
             "type": "php",

kits/shadcn/AspectRatio/EXAMPLES.md

@@ -1,6 +1,6 @@
-# AspectRatio
+# Examples
 
-A container that maintains a specific width-to-height ratio for its content.
+## Default
 
 ```twig {"preview":true,"height":"400px"}
 <twig:AspectRatio ratio="1 / 1" class="max-w-[300px]">
@@ -12,17 +12,7 @@ A container that maintains a specific width-to-height ratio for its content.
 </twig:AspectRatio>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### With a 1 / 1 aspect ratio
+## With a 1 / 1 aspect ratio
 
 ```twig {"preview":true,"height":"400px"}
 <twig:AspectRatio ratio="1 / 1" class="max-w-[350px]">
@@ -34,7 +24,7 @@ A container that maintains a specific width-to-height ratio for its content.
 </twig:AspectRatio>
 ```
 
-### With a 16 / 9 aspect ratio
+## With a 16 / 9 aspect ratio
 
 ```twig {"preview":true,"height":"400px"}
 <twig:AspectRatio ratio="16 / 9" class="max-w-[350px]">

kits/shadcn/AspectRatio/manifest.json

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

kits/shadcn/Avatar/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Avatar
+# Examples
 
-A circular element that displays a user's profile image or initials as a fallback.
+## Avatar with Image
 
 ```twig {"preview":true}
 <twig:Avatar>
@@ -8,25 +8,7 @@ A circular element that displays a user's profile image or initials as a fallbac
 </twig:Avatar>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Avatar with Image
-
-```twig {"preview":true}
-<twig:Avatar>
-    <twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
-</twig:Avatar>
-```
-
-### Avatar with Text
+## Avatar with Text
 
 ```twig {"preview":true}
 <div class="flex gap-1">
@@ -39,7 +21,7 @@ A circular element that displays a user's profile image or initials as a fallbac
 </div>
 ```
 
-### Avatar Group
+## Avatar Group
 
 ```twig {"preview":true}
 <div class="flex -space-x-2">

kits/shadcn/Avatar/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Avatar",
+    "description": "A circular element that displays a user's profile image or initials as a fallback.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Badge/EXAMPLES.md

@@ -1,28 +1,12 @@
-# Badge
+# Examples
 
-A small element that displays status, counts, or labels with optional icons.
+## Default
 
 ```twig {"preview":true}
 <twig:Badge>Badge</twig:Badge>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Badge>Badge</twig:Badge>
-```
-
-### Secondary
+## Secondary
 
 ```twig {"preview":true}
 <twig:Badge variant="secondary">
@@ -30,7 +14,7 @@ A small element that displays status, counts, or labels with optional icons.
 </twig:Badge>
 ```
 
-### Outline
+## Outline
 
 ```twig {"preview":true}
 <twig:Badge variant="outline">
@@ -38,7 +22,7 @@ A small element that displays status, counts, or labels with optional icons.
 </twig:Badge>
 ```
 
-### Destructive
+## Destructive
 
 ```twig {"preview":true}
 <twig:Badge variant="destructive">
@@ -46,7 +30,7 @@ A small element that displays status, counts, or labels with optional icons.
 </twig:Badge>
 ```
 
-### With Icon
+## With Icon
 
 ```twig {"preview":true}
 <twig:Badge>

kits/shadcn/Badge/manifest.json

@@ -1,5 +1,11 @@
 {
-    "$schema": "../../../../schemas/component.json",
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Badge",
+    "description": "A small element that displays status, counts, or labels with optional icons.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
     "dependencies": [
         {
             "type": "php",

kits/shadcn/Breadcrumb/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Breadcrumb
+# Examples
 
-A navigation element that shows the current page's location in the site hierarchy with clickable links.
+## Default
 
 ```twig {"preview":true}
 <twig:Breadcrumb>
@@ -24,41 +24,7 @@ A navigation element that shows the current page's location in the site hierarch
 </twig:Breadcrumb>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Breadcrumb>
-    <twig:Breadcrumb:List>
-        <twig:Breadcrumb:Item>
-            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
-        </twig:Breadcrumb:Item>
-        <twig:Breadcrumb:Separator />
-        <twig:Breadcrumb:Item>
-            <twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
-        </twig:Breadcrumb:Item>
-        <twig:Breadcrumb:Separator />
-        <twig:Breadcrumb:Item>
-            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
-        </twig:Breadcrumb:Item>
-        <twig:Breadcrumb:Separator />
-        <twig:Breadcrumb:Item>
-            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
-        </twig:Breadcrumb:Item>
-    </twig:Breadcrumb:List>
-</twig:Breadcrumb>
-```
-
-### Custom Separator
+## Custom Separator
 
 ```twig {"preview":true}
 <twig:Breadcrumb>

kits/shadcn/Breadcrumb/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Breadcrumb",
+    "description": "A navigation element that shows the current page's location in the site hierarchy with clickable links.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Button/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Button
+# Examples
 
-A clickable element that triggers actions or events, supporting various styles and states.
+## Default
 
 ```twig {"preview":true}
 <twig:Button>
@@ -8,61 +8,43 @@ A clickable element that triggers actions or events, supporting various styles a
 </twig:Button>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Button>
-    Click me
-</twig:Button>
-```
-
-### Primary
+## Primary
 
 ```twig {"preview":true}
 <twig:Button>Button</twig:Button>
 ```
 
-### Secondary
+## Secondary
 
 ```twig {"preview":true}
 <twig:Button variant="outline">Outline</twig:Button>
 ```
 
-### Destructive
+## Destructive
 
 ```twig {"preview":true}
 <twig:Button variant="destructive">Destructive</twig:Button>
 ```
 
-### Outline
+## Outline
 
 ```twig {"preview":true}
 <twig:Button variant="outline">Outline</twig:Button>
 ```
 
-### Ghost
+## Ghost
 
 ```twig {"preview":true}
 <twig:Button variant="ghost">Ghost</twig:Button>
 ```
 
-### Link
+## Link
 
 ```twig {"preview":true}
 <twig:Button variant="link">Link</twig:Button>
 ```
 
-### Icon
+## Icon
 
 ```twig {"preview":true}
 <twig:Button variant="outline" size="icon">
@@ -70,7 +52,7 @@ A clickable element that triggers actions or events, supporting various styles a
 </twig:Button>
 ```
 
-### With Icon
+## With Icon
 
 ```twig {"preview":true}
 <twig:Button>
@@ -78,7 +60,7 @@ A clickable element that triggers actions or events, supporting various styles a
 </twig:Button>
 ```
 
-### Loading
+## Loading
 
 ```twig {"preview":true}
 <twig:Button disabled>

kits/shadcn/Button/manifest.json

@@ -1,5 +1,11 @@
 {
-    "$schema": "../../../../schemas/component.json",
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Button",
+    "description": "A clickable element that triggers actions or events, supporting various styles and states.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
     "dependencies": [
         {
             "type": "php",

kits/shadcn/Card/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Card
+# Examples
 
-A container that groups related content and actions into a box with optional header, content, and footer sections.
+## Default
 
 ```twig {"preview":true,"height":"300px"}
 <twig:Card class="w-[350px]">
@@ -18,35 +18,7 @@ A container that groups related content and actions into a box with optional hea
 </twig:Card>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true,"height":"300px"}
-<twig:Card class="w-[350px]">
-    <twig:Card:Header>
-        <twig:Card:Title>Card Title</twig:Card:Title>
-        <twig:Card:Description>Card Description</twig:Card:Description>
-    </twig:Card:Header>
-    <twig:Card:Content>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
-    </twig:Card:Content>
-    <twig:Card:Footer class="justify-between">
-        <twig:Button variant="outline">Cancel</twig:Button>
-        <twig:Button>Action</twig:Button>
-    </twig:Card:Footer>
-</twig:Card>
-```
-
-### With Notifications
+## With Notifications
 
 ```twig {"preview":true,"height":"400px"}
 {% set notifications = [

kits/shadcn/Card/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Card",
+    "description": "A container that groups related content and actions into a box with optional header, content, and footer sections.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Checkbox/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Checkbox
+# Examples
 
-A form control that allows the user to toggle between checked and unchecked states.
+## Default
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">
@@ -11,28 +11,7 @@ A form control that allows the user to toggle between checked and unchecked stat
 </div>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<div class="flex items-center space-x-2">
-    <twig:Checkbox id="terms" />
-    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-        Accept terms and conditions
-    </label>
-</div>
-```
-
-### With Label Component
+## With Label Component
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">
@@ -41,7 +20,7 @@ A form control that allows the user to toggle between checked and unchecked stat
 </div>
 ```
 
-### Disabled
+## Disabled
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">

kits/shadcn/Checkbox/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Checkbox",
+    "description": "A form control that allows the user to toggle between checked and unchecked states.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Input/EXAMPLES.md

@@ -1,28 +1,12 @@
-# Input
+# Examples
 
-A form control that allows users to enter text, numbers, or select files.
+## Default
 
 ```twig {"preview":true}
 <twig:Input type="email" placeholder="Email" class="max-w-sm" />
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Input type="email" placeholder="Email" class="max-w-sm" />
-```
-
-### File
+## File
 
 ```twig {"preview":true}
 <div class="grid w-full max-w-sm items-center gap-1.5">
@@ -31,13 +15,13 @@ A form control that allows users to enter text, numbers, or select files.
 </div>
 ```
 
-### Disabled
+## Disabled
 
 ```twig {"preview":true}
 <twig:Input type="email" placeholder="Email" disabled class="max-w-sm" />
 ```
 
-### With Label
+## With Label
 
 ```twig {"preview":true}
 <div class="grid w-full max-w-sm items-center gap-1.5">
@@ -46,7 +30,7 @@ A form control that allows users to enter text, numbers, or select files.
 </div>
 ```
 
-### With Button
+## With Button
 
 ```twig {"preview":true}
 <div class="flex w-full max-w-sm items-center space-x-2">

kits/shadcn/Input/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Input",
+    "description": "A form control that allows users to enter text, numbers, or select files.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Label/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Label
+# Examples
 
-A text element that identifies form controls and other content.
+## Default
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">
@@ -9,26 +9,7 @@ A text element that identifies form controls and other content.
 </div>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<div class="flex items-center space-x-2">
-    <twig:Checkbox id="terms" />
-    <twig:Label for="terms">Accept terms and conditions</twig:Label>
-</div>
-```
-
-### With Input
+## With Input
 
 ```twig {"preview":true}
 <div class="grid w-full max-w-sm items-center gap-1.5">
@@ -37,7 +18,7 @@ A text element that identifies form controls and other content.
 </div>
 ```
 
-### Required Field
+## Required Field
 
 ```twig {"preview":true}
 <div class="grid w-full max-w-sm items-center gap-1.5">

kits/shadcn/Label/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Label",
+    "description": "A text element that identifies form controls and other content.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Pagination/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Pagination
+# Examples
 
-A navigation component that displays page numbers and controls for moving between pages.
+## Default
 
 ```twig {"preview":true}
 <twig:Pagination>
@@ -27,44 +27,7 @@ A navigation component that displays page numbers and controls for moving betwee
 </twig:Pagination>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Pagination>
-    <twig:Pagination:Content>
-        <twig:Pagination:Item>
-            <twig:Pagination:Previous href="#" />
-        </twig:Pagination:Item>
-        <twig:Pagination:Item>
-            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
-        </twig:Pagination:Item>
-        <twig:Pagination:Item>
-            <twig:Pagination:Link href="#" isActive>2</twig:Pagination:Link>
-        </twig:Pagination:Item>
-        <twig:Pagination:Item>
-            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
-        </twig:Pagination:Item>
-        <twig:Pagination:Item>
-            <twig:Pagination:Ellipsis />
-        </twig:Pagination:Item>
-        <twig:Pagination:Item>
-            <twig:Pagination:Next href="#" />
-        </twig:Pagination:Item>
-    </twig:Pagination:Content>
-</twig:Pagination>
-```
-
-### Symmetric
+## Symmetric
 
 ```twig {"preview":true}
 <twig:Pagination>

kits/shadcn/Pagination/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Pagination",
+    "description": "A navigation component that displays page numbers and controls for moving between pages.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Progress/EXAMPLES.md

@@ -1,28 +1,12 @@
-# Progress
+# Examples
 
-A visual indicator that shows the completion status of a task or operation.
+## Default
 
 ```twig {"preview":true}
 <twig:Progress value="33" />
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Progress value="33" />
-```
-
-### With Label
+## With Label
 
 ```twig {"preview":true}
 <div class="flex flex-col gap-2 w-sm">
@@ -34,7 +18,7 @@ A visual indicator that shows the completion status of a task or operation.
 </div>
 ```
 
-### Different Values
+## Different Values
 
 ```twig {"preview":true}
 <div class="flex flex-col gap-1.5 w-sm">

kits/shadcn/Progress/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Progress",
+    "description": "A visual indicator that shows the completion status of a task or operation.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Select/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Select
+# Examples
 
-A dropdown control that allows users to choose from a list of options.
+## Default
 
 ```twig {"preview":true}
 <twig:Select class="max-w-sm">
@@ -10,27 +10,7 @@ A dropdown control that allows users to choose from a list of options.
 </twig:Select>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Select class="max-w-sm">
-    <option value="1">1</option>
-    <option value="2">2</option>
-    <option value="3">3</option>
-</twig:Select>
-```
-
-### With Label
+## With Label
 
 ```twig {"preview":true}
 <div class="grid w-full max-w-sm items-center gap-1.5">
@@ -43,7 +23,7 @@ A dropdown control that allows users to choose from a list of options.
 </div>
 ```
 
-### Disabled
+## Disabled
 
 ```twig {"preview":true}
 <twig:Select disabled class="max-w-sm">

kits/shadcn/Select/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Select",
+    "description": "A dropdown control that allows users to choose from a list of options.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Separator/EXAMPLES.md

@@ -1,9 +1,9 @@
-# Separator
+# Examples
 
-A visual divider that creates space between content elements, available in horizontal and vertical orientations.
+## Default
 
 ```twig {"preview":true}
-<div class="max-w-sm">
+<div>
     <div class="space-y-1">
         <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
         <p class="text-sm text-muted-foreground">
@@ -21,38 +21,7 @@ A visual divider that creates space between content elements, available in horiz
 </div>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<div>
-    <div class="space-y-1">
-        <h4 class="text-sm font-medium leading-none">Symfony UX</h4>
-        <p class="text-sm text-muted-foreground">
-            Symfony UX initiative: a JavaScript ecosystem for Symfony
-        </p>
-    </div>
-    <twig:Separator class="my-4" />
-    <div class="flex h-5 items-center space-x-4 text-sm">
-        <div>Blog</div>
-        <twig:Separator orientation="vertical" />
-        <div>Docs</div>
-        <twig:Separator orientation="vertical" />
-        <div>Source</div>
-    </div>
-</div>
-```
-
-### Vertical
+## Vertical
 
 ```twig {"preview":true}
 <div class="flex h-5 items-center gap-4 text-sm">

kits/shadcn/Separator/manifest.json

@@ -1,5 +1,11 @@
 {
-    "$schema": "../../../../schemas/component.json",
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Separator",
+    "description": "A visual divider that creates space between content elements, available in horizontal and vertical orientations.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
     "dependencies": [
         {
             "type": "php",

kits/shadcn/Skeleton/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Skeleton
+# Examples
 
-A placeholder element that displays a loading state with an animated background.
+## User
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-4">
@@ -12,29 +12,7 @@ A placeholder element that displays a loading state with an animated background.
 </div>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### User
-
-```twig {"preview":true}
-<div class="flex items-center space-x-4">
-    <twig:Skeleton class="h-12 w-12 rounded-full" />
-    <div class="space-y-2">
-        <twig:Skeleton class="h-4 w-[250px]" />
-        <twig:Skeleton class="h-4 w-[200px]" />
-    </div>
-</div>
-```
-
-### Card
+## Card
 
 ```twig {"preview":true,"height":"250px"}
 <div class="space-y-3">

kits/shadcn/Skeleton/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Skeleton",
+    "description": "A placeholder element that displays a loading state with an animated background.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Switch/EXAMPLES.md

@@ -1,6 +1,6 @@
-# Switch
+# Examples
 
-A toggle control that switches between on and off states.
+## Default
 
 ```twig {"preview":true}
 <div class="flex items-center space-x-2">
@@ -9,26 +9,7 @@ A toggle control that switches between on and off states.
 </div>
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<div class="flex items-center space-x-2">
-    <twig:Switch id="airplane-mode" />
-    <twig:Label for="airplane-mode">Airplane Mode</twig:Label>
-</div>
-```
-
-### Form
+## Form
 
 ```twig {"preview":true,"height":"300px"}
 <form action="/" method="post">

kits/shadcn/Switch/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Switch",
+    "description": "A toggle control that switches between on and off states.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Table/EXAMPLES.md

@@ -1,47 +1,6 @@
-# Table
+# Examples
 
-A structured grid element that organizes data into rows and columns, supporting headers, captions, and footers.
-
-```twig {"preview":true,"height":"400px"}
-{%- set invoices = [
-  { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" },
-  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
-  { invoice: "INV003", paymentStatus: "Unpaid", totalAmount: "$350.00", paymentMethod: "Bank Transfer" },
-] -%}
-<twig:Table>
-    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
-    <twig:Table:Header>
-        <twig:Table:Row>
-            <twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
-            <twig:Table:Head>Status</twig:Table:Head>
-            <twig:Table:Head>Method</twig:Table:Head>
-            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
-        </twig:Table:Row>
-    </twig:Table:Header>
-    <twig:Table:Body>
-        {% for invoice in invoices %}
-            <twig:Table:Row>
-                <twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
-                <twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
-                <twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
-                <twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
-            </twig:Table:Row>
-        {% endfor %}
-    </twig:Table:Body>
-</twig:Table>
-```
-
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Basic Table
+## Basic Table
 
 ```twig {"preview":true,"height":"550px"}
 {%- set invoices = [

kits/shadcn/Table/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Table",
+    "description": "A structured grid element that organizes data into rows and columns, supporting headers, captions, and footers.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/Textarea/EXAMPLES.md

@@ -1,28 +1,12 @@
-# Textarea
+# Examples
 
-A form control for entering multiple lines of text.
+## Default
 
 ```twig {"preview":true}
 <twig:Textarea placeholder="Type your message here." class="max-w-sm" />
 ```
 
-## Installation
-
-<!-- Placeholder: Installation -->
-
-## Usage
-
-<!-- Placeholder: Usage -->
-
-## Examples
-
-### Default
-
-```twig {"preview":true}
-<twig:Textarea placeholder="Type your message here." class="max-w-sm" />
-```
-
-### With Label
+## With Label
 
 ```twig {"preview":true}
 <div class="grid w-sm gap-1.5">
@@ -31,7 +15,7 @@ A form control for entering multiple lines of text.
 </div>
 ```
 
-### Disabled
+## Disabled
 
 ```twig {"preview":true}
 <twig:Textarea placeholder="Type your message here." disabled class="max-w-sm" />

kits/shadcn/Textarea/manifest.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Textarea",
+    "description": "A form control for entering multiple lines of text.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": [
+        {
+            "type": "php",
+            "package": "tales-from-a-dev/twig-tailwind-extra"
+        }
+    ]
+}

kits/shadcn/manifest.json

@@ -1,4 +1,5 @@
 {
+    "$schema": "../../schema-kit-v1.json",
     "name": "Shadcn UI",
     "description": "Component based on the Shadcn UI library, one of the most popular design systems in JavaScript world.",
     "license": "MIT",

kits/shadcn/templates/components/Alert/Description.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Alert/Title.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/AspectRatio.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "twig/extra-bundle"
-        }
-    ]
-}

kits/shadcn/templates/components/Avatar.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Avatar/Image.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Avatar/Text.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Breadcrumb.meta.json

@@ -1,4 +0,0 @@
-{
-    "$schema": "../../../../schemas/component.json",
-    "dependencies": []
-}

kits/shadcn/templates/components/Breadcrumb/Ellipsis.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Breadcrumb/Item.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Breadcrumb/Link.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Breadcrumb/List.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Breadcrumb/Page.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Breadcrumb/Separator.meta.json

@@ -1,13 +0,0 @@
-{
-    "$schema": "../../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "symfony/ux-icons"
-        },
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}

kits/shadcn/templates/components/Card.meta.json

@@ -1,9 +0,0 @@
-{
-    "$schema": "../../../../schemas/component.json",
-    "dependencies": [
-        {
-            "type": "php",
-            "package": "tales-from-a-dev/twig-tailwind-extra"
-        }
-    ]
-}