[Toolkit][Shadcn] add Empty component

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

@@ -0,0 +1,105 @@
+# Examples
+
+## Outline
+
+```twig {"preview":true,"height":"280px"}
+<twig:Empty class="border border-dashed">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="tabler:cloud" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>Cloud storage empty</twig:Empty:Title>
+        <twig:Empty:Description>
+            Upload files to your cloud storage to access them anywhere.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            Upload files
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+
+## Background
+
+```twig {"preview":true,"height":"280px"}
+<twig:Empty class="from-muted/50 to-background h-full bg-linear-to-b from-30%">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="lucide:bell" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>No notifications</twig:Empty:Title>
+        <twig:Empty:Description>
+            You're all caught up. New notifications will appear here.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            <twig:ux:icon name="lucide:refresh-ccw" class="size-4" />
+            Refresh
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+
+## Avatar
+
+```twig {"preview":true,"height":"280px"}
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <twig:Avatar class="size-12">
+                <twig:Avatar:Image
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                    class="grayscale"
+                />
+                <twig:Avatar:Text>LR</twig:Avatar:Text>
+            </twig:Avatar>
+        </twig:Empty:Media>
+        <twig:Empty:Title>User offline</twig:Empty:Title>
+        <twig:Empty:Description>
+            This user is currently offline. You can leave a message to notify them or try again later.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">Leave message</twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+
+## Avatar group
+
+```twig {"preview":true,"height":"300px"}
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
+                    <twig:Avatar:Text>CN</twig:Avatar:Text>
+                </twig:Avatar>
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
+                    <twig:Avatar:Text>LR</twig:Avatar:Text>
+                </twig:Avatar>
+                <twig:Avatar>
+                    <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+                    <twig:Avatar:Text>ER</twig:Avatar:Text>
+                </twig:Avatar>
+            </div>
+        </twig:Empty:Media>
+        <twig:Empty:Title>No team members</twig:Empty:Title>
+        <twig:Empty:Description>
+            Invite your team to collaborate on this project.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">
+            <twig:ux:icon name="lucide:plus" class="size-4" />
+            Invite members
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```

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

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Empty",
+    "description": "Use the Empty component to display an empty state.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/empty/templates/components/Empty.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty"
+    class="{{ 'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/empty/templates/components/Empty/Content.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-content"
+    class="{{ 'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/empty/templates/components/Empty/Description.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-description"
+    class="{{ 'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/empty/templates/components/Empty/Header.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-header"
+    class="{{ 'flex max-w-sm flex-col items-center gap-2 text-center ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/empty/templates/components/Empty/Media.html.twig

@@ -0,0 +1,24 @@
+{# @prop variant 'default'|'icon' The variant, default to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
+{%- set style = html_cva(
+    base: 'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    default_variant: {
+        variant: 'default',
+    },
+) -%}
+
+<div
+    data-slot="empty-icon"
+    data-variant="{{ variant }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/empty/templates/components/Empty/Title.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="empty-title"
+    class="{{ 'text-lg font-medium tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

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

@@ -0,0 +1,37 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty class="border border-dashed">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="tabler:cloud" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>Cloud storage empty</twig:Empty:Title>
+        <twig:Empty:Description>
+            Upload files to your cloud storage to access them anywhere.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            Upload files
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 border border-dashed">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="icon" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-muted text-foreground size-10 rounded-lg [&amp;_svg:not([class*='size-'])]:size-6">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.657 18C4.085 18 2 15.993 2 13.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H6.657"></path></svg>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">Cloud storage empty</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Upload files to your cloud storage to access them anywhere.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<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">Upload files
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,39 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty class="from-muted/50 to-background h-full bg-linear-to-b from-30%">
+    <twig:Empty:Header>
+        <twig:Empty:Media variant="icon">
+            <twig:ux:icon name="lucide:bell" class="size-5" />
+        </twig:Empty:Media>
+        <twig:Empty:Title>No notifications</twig:Empty:Title>
+        <twig:Empty:Description>
+            You're all caught up. New notifications will appear here.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button variant="outline" size="sm">
+            <twig:ux:icon name="lucide:refresh-ccw" class="size-4" />
+            Refresh
+        </twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 from-muted/50 to-background h-full bg-linear-to-b from-30%">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="icon" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-muted text-foreground size-10 rounded-lg [&amp;_svg:not([class*='size-'])]:size-6">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-5" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">No notifications</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">You're all caught up. New notifications will appear here.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<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"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-4" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9a9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5m-5 4a9 9 0 0 0 9 9a9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></g></svg>
+            Refresh
+        </button>
+    </div>
+</div>

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

@@ -0,0 +1,44 @@
+<!--
+- Kit: Shadcn UI
+- Component: Empty
+- Code:
+```twig
+<twig:Empty>
+    <twig:Empty:Header>
+        <twig:Empty:Media>
+            <twig:Avatar class="size-12">
+                <twig:Avatar:Image
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                    class="grayscale"
+                />
+                <twig:Avatar:Text>LR</twig:Avatar:Text>
+            </twig:Avatar>
+        </twig:Empty:Media>
+        <twig:Empty:Title>User offline</twig:Empty:Title>
+        <twig:Empty:Description>
+            This user is currently offline. You can leave a message to notify them or try again later.
+        </twig:Empty:Description>
+    </twig:Empty:Header>
+    <twig:Empty:Content>
+        <twig:Button size="sm">Leave message</twig:Button>
+    </twig:Empty:Content>
+</twig:Empty>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div data-slot="empty" class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 ">
+<div data-slot="empty-header" class="flex max-w-sm flex-col items-center gap-2 text-center ">
+<div data-slot="empty-icon" data-variant="default" class="flex shrink-0 items-center justify-center mb-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-transparent">
+<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full size-12" data-slot="avatar"><img class="aspect-square h-full w-full grayscale" alt="@shadcn" src="https://github.com/shadcn.png">
+
+                <span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">LR</span>
+            </span>
+        </div>
+        <div data-slot="empty-title" class="text-lg font-medium tracking-tight ">User offline</div>
+        <div data-slot="empty-description" class="text-muted-foreground [&amp;&gt;a:hover]:text-primary text-sm/relaxed [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">This user is currently offline. You can leave a message to notify them or try again later.
+        </div>
+    </div>
+    <div data-slot="empty-content" class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance ">
+<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">Leave message</button>
+    </div>
+</div>