Skip to content

Commit 3b2fb95

Browse files
bernard-ngbernard-ng
committed
[Toolkit][Shadcn] Add Item component
1 parent cd4dbe3 commit 3b2fb95

File tree

12 files changed

+228
-0
lines changed

12 files changed

+228
-0
lines changed

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<div class="flex items-center space-x-2">
7+
<twig:Item>
8+
<twig:Item:Content>
9+
<twig:Item:Title>Default Variant</twig:Item:Title>
10+
<twig:Item:Description>
11+
Standard styling with subtle background and borders.
12+
</twig:Item:Description>
13+
</twig:Item:Content>
14+
<twig:Item:Actions>
15+
<twig:Button variant="outline" size="sm">
16+
Open
17+
</twig:Button>
18+
</twig:Item:Actions>
19+
</twig:Item>
20+
<twig:Item variant="outline">
21+
<twig:Item:Content>
22+
<twig:Item:Title>Outline Variant</twig:Item:Title>
23+
<twig:Item:Description>
24+
Outlined style with clear borders and transparent background.
25+
</twig:Item:Description>
26+
</twig:Item:Content>
27+
<twig:Item:Actions>
28+
<twig:Button variant="outline" size="sm">
29+
Open
30+
</twig:Button>
31+
</twig:Item:Actions>
32+
</twig:Item>
33+
<twig:Item variant="muted">
34+
<twig:Item:Content>
35+
<twig:Item:Title>Muted Variant</twig:Item:Title>
36+
<twig:Item:Description>
37+
Subdued appearance with muted colors for secondary content.
38+
</twig:Item:Description>
39+
</twig:Item:Content>
40+
<twig:Item:Actions>
41+
<twig:Button variant="outline" size="sm">
42+
Open
43+
</twig:Button>
44+
</twig:Item:Actions>
45+
</twig:Item>
46+
</div>
47+
```
48+
49+
## With Icon
50+
51+
```twig {"preview":true}
52+
<div class="grid w-full max-w-sm items-center gap-1.5">
53+
<twig:Item variant="outline">
54+
<twig:Item:Media variant="icon">
55+
<twig:ux:icon name="lucide:shield-alert" />
56+
</twig:Item:Media>
57+
<twig:Item:Content>
58+
<twig:Item:Title>Security Alert</twig:Item:Title>
59+
<twig:Item:Description>
60+
New login detected from unknown device.
61+
</twig:Item:Description>
62+
</twig:Item:Content>
63+
<twig:Item:Actions>
64+
<twig:Button size="sm" variant="outline">
65+
Review
66+
</twig:Button>
67+
</twig:Item:Actions>
68+
</twig:Item>
69+
</div>
70+
```
71+
72+
## Link
73+
74+
```twig {"preview":true}
75+
<div class="grid w-full max-w-sm items-center gap-1.5">
76+
<twig:Item as="a" href="#">
77+
<twig:Item:Content>
78+
<twig:Item:Title>Visit our documentation</twig:Item:Title>
79+
<twig:Item:Description>
80+
Learn how to get started with our components.
81+
</twig:Item:Description>
82+
</twig:Item:Content>
83+
<twig:Item:Actions>
84+
<twig:ux:icon name="lucide:chevron-right-icon" class="size-4" />
85+
</twig:Item:Actions>
86+
</twig:Item>
87+
<twig:Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
88+
<twig:Item:Content>
89+
<twig:Item:Title>External resource</twig:Item:Title>
90+
<twig:Item:Description>
91+
Opens in a new tab with security attributes.
92+
</twig:Item:Description>
93+
</twig:Item:Content>
94+
<twig:Item:Actions>
95+
<twig:ux:icon name="lucide:external-link" class="size-4" />
96+
</twig:Item:Actions>
97+
</twig:Item>
98+
</div>
99+
```

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "Item",
5+
"description": "A versatile component that you can use to display any content.",
6+
"copy-files": {
7+
"templates/": "templates/"
8+
},
9+
"dependencies": {
10+
"composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra"]
11+
}
12+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{%- props variant = 'default', size = 'default', as = 'div' -%}
2+
{%- set style = html_cva({
3+
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]',
4+
variants: {
5+
variant: {
6+
default: 'bg-transparent',
7+
outline: 'border-border',
8+
muted: 'bg-muted/50',
9+
},
10+
size: {
11+
default: 'p-4 gap-4',
12+
sm: 'py-3 px-4 gap-2.5',
13+
},
14+
},
15+
defaultVariants: {
16+
variant: 'default',
17+
size: 'default',
18+
},
19+
}) -%}
20+
21+
<{{ as }}
22+
data-slot="item"
23+
data-variant="{{ variant }}"
24+
data-size="{{ size }}"
25+
class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
26+
{{ attributes }}
27+
>
28+
{%- block content %}{% endblock -%}
29+
</{{ as }}>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div
2+
data-slot="item-actions"
3+
class="{{ 'flex items-center gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</div>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div
2+
data-slot="item-content"
3+
class="{{ 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none ' ~ attributes.render('class')|tailwind_merge }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</div>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<p
2+
data-slot="item-description"
3+
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 }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</p>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div
2+
data-slot="item-footer"
3+
class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div
2+
role="list"
3+
data-slot="item-group"
4+
class="{{ 'group/item-group flex flex-col ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</div>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div
2+
data-slot="item-header"
3+
class="{{ 'flex basis-full items-center justify-between gap-2 ' ~ attributes.render('class')|tailwind_merge }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</div>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{%- props variant = 'default' -%}
2+
{%- set style = html_cva({
3+
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',
4+
variants: {
5+
variant: {
6+
default: 'bg-transparent',
7+
icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
8+
image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
9+
},
10+
},
11+
defaultVariants: {
12+
variant: 'default',
13+
},
14+
}) -%}
15+
16+
<div
17+
data-slot="item-media"
18+
data-variant="{{ variant }}"
19+
class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
20+
{{ attributes }}
21+
>
22+
{%- block content %}{% endblock -%}
23+
</div>

0 commit comments

Comments
 (0)