[Toolkit][Shadcn] Add Item component

src/Toolkit/kits/shadcn/avatar/templates/components/Avatar.html.twig

@@ -1,5 +1,6 @@
 <span
     class="{{ 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ' ~ attributes.render('class')|tailwind_merge }}"
+    data-slot="avatar"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

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

@@ -0,0 +1,215 @@
+# Examples
+
+## Default
+
+```twig {"preview":true,"height":"400px"}
+<div class="flex w-full max-w-md flex-col gap-6">
+    <twig:Item variant="outline">
+        <twig:Item:Content>
+            <twig:Item:Title>Basic Item</twig:Item:Title>
+            <twig:Item:Description>
+                A simple item with title and description.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button variant="outline" size="sm">
+                Action
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+
+    <twig:Item variant="outline" size="sm" as="a" href="#">
+        <twig:Item:Media>
+            <twig:ux:icon name="lucide:badge-check" class="size-5" />
+        </twig:Item:Media>
+        <twig:Item:Content>
+            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
+        </twig:Item:Actions>
+    </twig:Item>
+</div>
+```
+
+## Variants
+
+```twig {"preview":true,"height":"400px"}
+<div class="flex flex-col gap-6">
+    <twig:Item>
+        <twig:Item:Content>
+            <twig:Item:Title>Default Variant</twig:Item:Title>
+            <twig:Item:Description>
+                Standard styling with subtle background and borders.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button variant="outline" size="sm">
+                Open
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+    <twig:Item variant="outline">
+        <twig:Item:Content>
+            <twig:Item:Title>Outline Variant</twig:Item:Title>
+            <twig:Item:Description>
+                Outlined style with clear borders and transparent background.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button variant="outline" size="sm">
+                Open
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+    <twig:Item variant="muted">
+        <twig:Item:Content>
+            <twig:Item:Title>Muted Variant</twig:Item:Title>
+            <twig:Item:Description>
+                Subdued appearance with muted colors for secondary content.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button variant="outline" size="sm">
+                Open
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+</div>
+```
+
+## Size
+
+```twig {"preview":true,"height":"400px"}
+<div class="flex w-full max-w-md flex-col gap-6">
+    <twig:Item variant="outline">
+        <twig:Item:Content>
+            <twig:Item:Title>Basic Item</twig:Item:Title>
+            <twig:Item:Description>
+                A simple item with title and description.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button variant="outline" size="sm">
+                Action
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+
+    <twig:Item variant="outline" size="sm" as="a" href="#">
+        <twig:Item:Media>
+            <twig:ux:icon name="lucide:badge-check" class="size-5" />
+        </twig:Item:Media>
+        <twig:Item:Content>
+            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
+        </twig:Item:Actions>
+    </twig:Item>
+</div>
+```
+
+## Icon
+
+```twig {"preview":true}
+<div class="flex w-full max-w-lg flex-col gap-6"">
+    <twig:Item variant="outline">
+        <twig:Item:Media variant="icon">
+            <twig:ux:icon name="lucide:shield-alert" class="size-4" />
+        </twig:Item:Media>
+        <twig:Item:Content>
+            <twig:Item:Title>Security Alert</twig:Item:Title>
+            <twig:Item:Description>
+                New login detected from unknown device.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button size="sm" variant="outline">
+                Review
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+</div>
+```
+
+## Avatar
+
+```twig {"preview":true,"height":"400px"}
+<div class="flex w-full max-w-lg flex-col gap-6"">
+    <twig:Item variant="outline">
+        <twig:Item:Media variant="icon">
+            <twig:Avatar>
+                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="ER" />
+            </twig:Avatar>
+        </twig:Item:Media>
+        <twig:Item:Content>
+            <twig:Item:Title>Evil Rabbit</twig:Item:Title>
+            <twig:Item:Description>
+                Last seen 5 months ago
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
+                <twig:ux:icon name="lucide:plus" class="size-4" />
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+
+    <twig:Item variant="outline">
+        <twig:Item:Media>
+          <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+            <twig:Avatar class="hidden sm:flex">
+              <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
+            </twig:Avatar>
+            <twig:Avatar class="hidden sm:flex">
+              <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
+            </twig:Avatar>
+            <twig:Avatar>
+              <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+            </twig:Avatar>
+          </div>
+        </twig:Item:Media>
+        <twig:Item:Content>
+            <twig:Item:Title>No Team Members</twig:Item:Title>
+            <twig:Item:Description>
+                Invite your team to collaborate on this project.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:Button size="sm" variant="outline">
+                Invite
+            </twig:Button>
+        </twig:Item:Actions>
+    </twig:Item>
+</div>
+```
+
+## Link
+
+```twig {"preview":true,"height":"400px"}
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Item as="a" href="#">
+        <twig:Item:Content>
+            <twig:Item:Title>Visit our documentation</twig:Item:Title>
+            <twig:Item:Description>
+                Learn how to get started with our components.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
+        </twig:Item:Actions>
+    </twig:Item>
+    <twig:Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
+        <twig:Item:Content>
+            <twig:Item:Title>External resource</twig:Item:Title>
+            <twig:Item:Description>
+                Opens in a new tab with security attributes.
+            </twig:Item:Description>
+        </twig:Item:Content>
+        <twig:Item:Actions>
+            <twig:ux:icon name="lucide:external-link" class="size-4" />
+        </twig:Item:Actions>
+    </twig:Item>
+</div>
+```

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

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Item",
+    "description": "A versatile component that you can use to display any content.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"],
+        "recipe": ["separator"]
+    }
+}

src/Toolkit/kits/shadcn/item/templates/components/Item.html.twig

@@ -0,0 +1,33 @@
+{# @prop variant 'default'|'outline'|'muted' The variant, default to `default` #}
+{# @prop size 'default'|'sm' The size, default to `default` #}
+{# @prop as 'div' The HTML tag to use, default to `div` #}
+{# @block content The default block #}
+{%- props variant = 'default', size = 'default', as = 'div' -%}
+{%- set style = html_cva(
+    base: 'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-border',
+            muted: 'bg-muted/50',
+        },
+        size: {
+            default: 'p-4 gap-4',
+            sm: 'py-3 px-4 gap-2.5',
+        },
+    },
+    default_variant: {
+        variant: 'default',
+        size: 'default',
+    },
+) -%}
+
+<{{ as }}
+    data-slot="item"
+    data-variant="{{ variant }}"
+    data-size="{{ size }}"
+    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</{{ as }}>

src/Toolkit/kits/shadcn/item/templates/components/Item/Actions.html.twig

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

src/Toolkit/kits/shadcn/item/templates/components/Item/Content.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="item-content"
+    class="{{ 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/item/templates/components/Item/Description.html.twig

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

src/Toolkit/kits/shadcn/item/templates/components/Item/Footer.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="item-footer"
+    class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/item/templates/components/Item/Group.html.twig

@@ -0,0 +1,9 @@
+{# @block content The default block #}
+<div
+    role="list"
+    data-slot="item-group"
+    class="{{ 'group/item-group flex flex-col ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/item/templates/components/Item/Header.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="item-header"
+    class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/item/templates/components/Item/Media.html.twig

@@ -0,0 +1,25 @@
+{# @prop variant 'default'|'icon'|'image' 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 gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+            image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+        },
+    },
+    default_variant: {
+        variant: 'default',
+    },
+) -%}
+
+<div
+    data-slot="item-media"
+    data-variant="{{ variant }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/item/templates/components/Item/Separator.html.twig

@@ -0,0 +1,10 @@
+{# @prop orientation 'horizontal'|'vertical' The orientation, default to `horizontal` #}
+{# @prop decorative bool Whether the separator is decorative, default to `true` #}
+{# @block content The default block #}
+{%- props orientation = 'horizontal', decorative = true -%}
+<twig:Separator
+    orientation="{{ orientation }}"
+    decorative="{{ decorative }}"
+    class="{{ ('my-0 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ ...attributes }}
+/>

src/Toolkit/kits/shadcn/item/templates/components/Item/Title.html.twig

@@ -0,0 +1,8 @@
+{# @block content The default block #}
+<div
+    data-slot="item-title"
+    class="{{ 'flex w-fit items-center gap-2 text-sm leading-snug font-medium ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes }}
+>
+    {%- block content %}{% endblock -%}
+</div>

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

@@ -8,6 +8,6 @@
 </twig:Avatar>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
+<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><img class="aspect-square h-full w-full " alt="@symfony" src="https://github.com/symfony.png">
 
 </span>

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

@@ -14,8 +14,8 @@
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div class="flex gap-1">
-    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted ">FP</span>
     </span>
-    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full "><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
+    <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full " data-slot="avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted bg-red-500 text-red-50">FP</span>
     </span>
 </div>