[Toolkit][Shadcn] Add Item component

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

@@ -0,0 +1,99 @@
+# Examples
+
+## Default
+
+```twig {"preview":true}
+<div class="flex items-center space-x-2">
+    <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>
+```
+
+## With Icon
+
+```twig {"preview":true}
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Item variant="outline">
+        <twig:Item:Media variant="icon">
+            <twig:ux:icon name="lucide:shield-alert" />
+        </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>
+```
+
+## Link
+
+```twig {"preview":true}
+<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,12 @@
+{
+    "$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": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"]
+    }
+}

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

@@ -0,0 +1,29 @@
+{%- 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',
+        },
+    },
+    defaultVariants: {
+        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,7 @@
+<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,7 @@
+<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,7 @@
+<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,7 @@
+<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,8 @@
+<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,7 @@
+<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,23 @@
+{%- 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',
+        },
+    },
+    defaultVariants: {
+        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,15 @@
+{%- props orientation = 'horizontal', decorative = true -%}
+
+<div
+    data-slot="item-separator"
+    data-orientation="{{ orientation }}"
+    class="{{ 'my-0 bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px ' ~ attributes.render('class')|tailwind_merge }}"
+    {% if decorative %}
+        role="none"
+        aria-hidden="true"
+    {% else %}
+        role="separator"
+        aria-orientation="{{ orientation }}"
+    {% endif %}
+    {{ attributes }}
+></div>

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

@@ -0,0 +1,7 @@
+<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 item, code 1__1.html

@@ -0,0 +1,83 @@
+<!--
+- Kit: Shadcn UI
+- Component: Item
+- Code:
+```twig
+<div class="flex items-center space-x-2">
+    <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>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center space-x-2">
+    <div data-slot="item" data-variant="default" data-size="default" class="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]">
+<div data-slot="item-content" class="flex flex-1 flex-col gap-1 [&amp;+[data-slot=item-content]]:flex-none ">
+<div data-slot="item-title" class="flex w-fit items-center gap-2 text-sm leading-snug font-medium ">Default Variant</div>
+            <p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Standard styling with subtle background and borders.
+            </p>
+        </div>
+        <div data-slot="item-actions" class="flex items-center gap-2 ">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3">Open
+            </button>
+        </div>
+    </div>
+    <div data-slot="item" data-variant="outline" data-size="default" class="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]">
+<div data-slot="item-content" class="flex flex-1 flex-col gap-1 [&amp;+[data-slot=item-content]]:flex-none ">
+<div data-slot="item-title" class="flex w-fit items-center gap-2 text-sm leading-snug font-medium ">Outline Variant</div>
+            <p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Outlined style with clear borders and transparent background.
+            </p>
+        </div>
+        <div data-slot="item-actions" class="flex items-center gap-2 ">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3">Open
+            </button>
+        </div>
+    </div>
+    <div data-slot="item" data-variant="muted" data-size="default" class="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]">
+<div data-slot="item-content" class="flex flex-1 flex-col gap-1 [&amp;+[data-slot=item-content]]:flex-none ">
+<div data-slot="item-title" class="flex w-fit items-center gap-2 text-sm leading-snug font-medium ">Muted Variant</div>
+            <p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Subdued appearance with muted colors for secondary content.
+            </p>
+        </div>
+        <div data-slot="item-actions" class="flex items-center gap-2 ">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3">Open
+            </button>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,41 @@
+<!--
+- Kit: Shadcn UI
+- Component: Item
+- Code:
+```twig
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Item variant="outline">
+        <twig:Item:Media variant="icon">
+            <twig:ux:icon name="lucide:shield-alert" />
+        </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>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <div data-slot="item" data-variant="outline" data-size="default" class="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]">
+<div data-slot="item-media" data-variant="icon" class="flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&amp;_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5">
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1zm-8-5v4m0 4h.01"></path></svg>
+        </div>
+        <div data-slot="item-content" class="flex flex-1 flex-col gap-1 [&amp;+[data-slot=item-content]]:flex-none ">
+<div data-slot="item-title" class="flex w-fit items-center gap-2 text-sm leading-snug font-medium ">Security Alert</div>
+            <p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">New login detected from unknown device.
+            </p>
+        </div>
+        <div data-slot="item-actions" class="flex items-center gap-2 ">
+<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3">Review
+            </button>
+        </div>
+    </div>
+</div>