[Site] Document Toolkit recipes props and blocks

Author: Kocal

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig

@@ -1,3 +1,4 @@
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to "default" #}
 {# @block content The default block #}
 {%- props variant = 'default' -%}
 <twig:Button variant="{{ variant }}" {{ ...attributes }}>

src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig

@@ -1,4 +1,4 @@
-{# @prop variant 'default'|'desctructive' The variant, default to "default" #}
+{# @prop variant 'default'|'desctructive' The variant, default to `default` #}
 {# @block content The default block #}
 {%- props variant = 'default' -%}
 {%- set style = html_cva(

src/Toolkit/kits/shadcn/aspect-ratio/EXAMPLES.md

@@ -1,4 +1,4 @@
-{# @prop ratio string The ratio to use, example "1 / 1", "16 / 9", ... #}
+{# @prop ratio string The ratio to use, example `3 / 4`, `16 / 9` #}
 {# @prop style string Additional CSS styles to apply #}
 {# @block content The default block #}
 {%- props ratio, style = '' -%}

src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig

@@ -1,4 +1,6 @@
-{%- props variant = 'default', outline = false -%}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline' The variant, default to "default" #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
 {%- set style = html_cva(
     base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
     variants: {
@@ -11,7 +13,7 @@
     },
 ) -%}
 <div
-    class="{{ style.apply({variant: variant, outline: outline}, attributes.render('class'))|tailwind_merge }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

src/Toolkit/kits/shadcn/badge/templates/components/Badge.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <nav{{ attributes }} aria-label="Breadcrumb">
     {%- block content %}{% endblock -%}
 </nav>

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

@@ -1,13 +1,8 @@
 <span
-    class="{{ 'flex h-9 w-9 items-center justify-center ' ~ attributes.render('class')|tailwind_merge }}"
+    class="{{ '[&>svg]:w-3.5 [&>svg]:h-3.5 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}
     role="presentation"
     aria-hidden="true"
 >
-    {% set _block = block('content') %}
-    {% if content is defined and content is not empty %}
-        {%- block content %}{% endblock -%}
-    {% else %}
-        <span class="h-4 w-4">...</span>
-    {% endif %}
+    <twig:ux:icon name="lucide:ellipsis" />
 </span>

src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <li
     class="{{ 'inline-flex items-center gap-1.5 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

src/Toolkit/kits/shadcn/breadcrumb/templates/components/Breadcrumb/Ellipsis.html.twig

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <a
     class="{{ 'transition-colors hover:text-foreground ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}