[Toolkit][Kdb] Add new component kdb from shadcn ui

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

@@ -0,0 +1,51 @@
+# Examples
+
+## Default
+
+```twig {"preview":true}
+<div class="flex flex-col items-center gap-4">
+  <twig:KbdGroup>
+    <twig:Kbd>⌘</twig:Kbd>
+    <twig:Kbd>⇧</twig:Kbd>
+    <twig:Kbd>⌥</twig:Kbd>
+    <twig:Kbd>⌃</twig:Kbd>
+  </twig:KbdGroup>
+  <twig:KbdGroup>
+    <twig:Kbd>Ctrl</twig:Kbd>
+    <span>+</span>
+    <twig:Kbd>B</twig:Kbd>
+  </twig:KbdGroup>
+</div>
+```
+
+## Group
+
+Use the `KbdGroup` component to group keyboard keys together.
+
+```twig {"preview":true}
+<div class="flex flex-col items-center gap-4">
+  <p class="text-muted-foreground text-sm">
+    Use
+    <twig:KbdGroup>
+      <twig:Kbd>Ctrl + B</twig:Kbd>
+      <twig:Kbd>Ctrl + K</twig:Kbd>
+    </twig:KbdGroup>
+    to open the command palette
+  </p>
+</div>
+```
+
+## Button
+
+Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.
+
+```twig {"preview":true}
+<div class="flex flex-wrap items-center gap-4">
+  <twig:Button size="sm" class="pr-2">
+    Accept <twig:Kbd>⏎</twig:Kbd>
+  </twig:Button>
+  <twig:Button variant="outline" size="sm" class="pr-2">
+    Cancel <twig:Kbd>Esc</twig:Kbd>
+  </twig:Button>
+</div>
+```

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

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Kbd",
+    "description": "Used to display textual user input from keyboard.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/kbd/templates/components/Kbd.html.twig

@@ -0,0 +1,7 @@
+{# @block content The default block #}
+<kbd
+    class="{{ ('bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</kbd>

src/Toolkit/kits/shadcn/kbd/templates/components/KbdGroup.html.twig

@@ -0,0 +1,4 @@
+{# @block content The default block #}
+<kbd class="inline-flex items-center gap-1">
+    {%- block content %}{% endblock -%}
+</kbd>

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

@@ -0,0 +1,31 @@
+<!--
+- Kit: Shadcn UI
+- Component: Kbd
+- Code:
+```twig
+<div class="flex flex-col items-center gap-4">
+  <twig:KbdGroup>
+    <twig:Kbd>⌘</twig:Kbd>
+    <twig:Kbd>⇧</twig:Kbd>
+    <twig:Kbd>⌥</twig:Kbd>
+    <twig:Kbd>⌃</twig:Kbd>
+  </twig:KbdGroup>
+  <twig:KbdGroup>
+    <twig:Kbd>Ctrl</twig:Kbd>
+    <span>+</span>
+    <twig:Kbd>B</twig:Kbd>
+  </twig:KbdGroup>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col items-center gap-4">
+  <kbd class="inline-flex items-center gap-1"><kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#140;&#152;</kbd>
+    <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#135;&sect;</kbd>
+    <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#140;&yen;</kbd>
+    <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#140;&#131;</kbd>
+  </kbd>
+  <kbd class="inline-flex items-center gap-1"><kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Ctrl</kbd>
+    <span>+</span>
+    <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">B</kbd>
+  </kbd>
+</div>

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

@@ -0,0 +1,26 @@
+<!--
+- Kit: Shadcn UI
+- Component: Kbd
+- Code:
+```twig
+<div class="flex flex-col items-center gap-4">
+  <p class="text-muted-foreground text-sm">
+    Use
+    <twig:KbdGroup>
+      <twig:Kbd>Ctrl + B</twig:Kbd>
+      <twig:Kbd>Ctrl + K</twig:Kbd>
+    </twig:KbdGroup>
+    to open the command palette
+  </p>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col items-center gap-4">
+  <p class="text-muted-foreground text-sm">
+    Use
+    <kbd class="inline-flex items-center gap-1"><kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Ctrl + B</kbd>
+      <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Ctrl + K</kbd>
+    </kbd>
+    to open the command palette
+  </p>
+</div>

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

@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Kbd
+- Code:
+```twig
+<div class="flex flex-wrap items-center gap-4">
+  <twig:Button size="sm" class="pr-2">
+    Accept <twig:Kbd>⏎</twig:Kbd>
+  </twig:Button>
+  <twig:Button variant="outline" size="sm" class="pr-2">
+    Cancel <twig:Kbd>Esc</twig:Kbd>
+  </twig:Button>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-wrap items-center gap-4">
+  <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5 pr-2">Accept <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#143;&#142;</kbd>
+  </button>
+  <button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5 pr-2">Cancel <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Esc</kbd>
+  </button>
+</div>