[Site] Document Toolkit recipes props and blocks

Author: Kocal

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

@@ -1,3 +1,5 @@
+{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #}
+{# @block content The default block #}
 {%- props open = false, id -%}
 
 {%- set _alert_dialog_open = open %}

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

@@ -1,4 +1,6 @@
-{% props variant = 'default' %}
+{# @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 }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>

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

@@ -1,7 +1,4 @@
-<twig:Button
-    variant="outline"
-    data-action="click->alert-dialog#close"
-    {{ ...attributes }}
->
+{# @block content The default block #}
+<twig:Button variant="outline" data-action="click->alert-dialog#close" {{ ...attributes }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <dialog
     id="{{ _alert_dialog_id }}"
     {{ _alert_dialog_open ? 'open' }}

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <p
     id="{{ _alert_dialog_description_id }}"
     class="{{ 'text-muted-foreground text-sm ' ~ attributes.render('class')|tailwind_merge }}"

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <footer
     class="{{ 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <header
     class="{{ 'flex flex-col gap-2 text-center sm:text-left ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <h2
     id="{{ _alert_dialog_title_id }}"
     class="{{ 'text-lg font-semibold ' ~ attributes.render('class')|tailwind_merge }}"

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

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 {%- set trigger_attrs = {
     'data-action': 'click->alert-dialog#open',
     'data-alert-dialog-target': 'trigger',

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

@@ -1,3 +1,5 @@
+{# @prop variant 'default'|'desctructive' The variant, default to `default` #}
+{# @block content The default block #}
 {%- props variant = 'default' -%}
 {%- set style = html_cva(
     base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',