[Toolkit][Shadcn] docs for Item component

Author: bernard-ng

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

@@ -1,3 +1,7 @@
+{# @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]',

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

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

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

@@ -1,3 +1,4 @@
+{# @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 }}"

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

@@ -1,3 +1,4 @@
+{# @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 }}"

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

@@ -1,3 +1,4 @@
+{# @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 }}"

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     role="list"
     data-slot="item-group"

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

@@ -1,3 +1,4 @@
+{# @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 }}"

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

@@ -1,3 +1,5 @@
+{# @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',

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

@@ -1,3 +1,6 @@
+{# @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 -%}
 
 <div

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

@@ -1,3 +1,4 @@
+{# @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 }}"