wip

Kocal · Kocal · commit c7b803c2ac73 · 2025-10-16T09:21:34.000+02:00
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig b/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 %}
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Action.html.twig
@@ -1,4 +1,5 @@
-{% props variant = 'default' %}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
 <twig:Button variant="{{ variant }}" {{ ...attributes }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Cancel.html.twig b/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>
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig b/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' }}
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Description.html.twig b/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 }}"
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Footer.html.twig b/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 }}
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Header.html.twig b/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 }}
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Title.html.twig b/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 }}"
diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig b/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',
diff --git a/src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig b/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',
diff --git a/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig b/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig
@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <p
     class="{{ 'text-sm [&_p]:leading-relaxed ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}
diff --git a/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Title.html.twig b/src/Toolkit/kits/shadcn/alert/templates/components/Alert/Title.html.twig
@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <h5
     class="{{ 'mb-1 font-medium leading-none tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}
diff --git a/src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig b/src/Toolkit/kits/shadcn/aspect-ratio/templates/components/AspectRatio.html.twig
@@ -1,3 +1,6 @@
+{# @prop ratio string The ratio to use, example "1 / 1", "16 / 9", ... #}
+{# @prop style string Additional CSS styles to apply #}
+{# @block content The default block #}
 {%- props ratio, style = '' -%}
 <div
     style="aspect-ratio: {{ ratio }}; {{ style }}"
diff --git a/src/Toolkit/kits/shadcn/button/EXAMPLES.md b/src/Toolkit/kits/shadcn/button/EXAMPLES.md
@@ -17,7 +17,7 @@
 ## Secondary
 
 ```twig {"preview":true}
-<twig:Button variant="outline">Outline</twig:Button>
+<twig:Button variant="secondary">Secondary</twig:Button>
 ```
 
 ## Destructive
@@ -67,3 +67,13 @@
     <twig:ux:icon name="lucide:loader-2" class="animate-spin" /> Please wait
 </twig:Button>
 ```
+
+## Different sizes
+
+```twig {"preview":true}
+<div class="flex items-center gap-2">
+    <twig:Button size="sm">Small</twig:Button>
+    <twig:Button>Default</twig:Button>
+    <twig:Button size="lg">Large</twig:Button>
+</div>
+```
diff --git a/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig b/src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig
@@ -1,4 +1,8 @@
-{%- props variant = 'default', outline = false, size = 'default', as = 'button' -%}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to "default" #}
+{# @prop size 'default'|'sm'|'lg'|'icon' The size, default to "default" #}
+{# @prop as 'button' The HTML tag to use, default to "button" #}
+{# @block content The default block #}
+{%- props variant = 'default', size = 'default', as = 'button' -%}
 {%- set style = html_cva(
     base: '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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     variants: {
@@ -20,7 +24,7 @@
 ) -%}
 
 <{{ as }}
-    class="{{ style.apply({variant: variant, outline: outline, size: size}, attributes.render('class'))|tailwind_merge }}"
+    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to "false" #}`
	`2`	`+{# @block content The default block #}`
`1`	`3`	`{%- props open = false, id -%}`
`2`	`4`
`3`	`5`	`{%- set _alert_dialog_open = open %}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{# @block content The default block #}`
`1`	`2`	`<dialog`
`2`	`3`	`id="{{ _alert_dialog_id }}"`
`3`	`4`	`{{ _alert_dialog_open ? 'open' }}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{# @block content The default block #}`
`1`	`2`	`<p`
`2`	`3`	`id="{{ _alert_dialog_description_id }}"`
`3`	`4`	`class="{{ 'text-muted-foreground text-sm ' ~ attributes.render('class')\|tailwind_merge }}"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{# @block content The default block #}`
`1`	`2`	`<footer`
`2`	`3`	`class="{{ 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ' ~ attributes.render('class')\|tailwind_merge }}"`
`3`	`4`	`{{ attributes }}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{# @block content The default block #}`
`1`	`2`	`<header`
`2`	`3`	`class="{{ 'flex flex-col gap-2 text-center sm:text-left ' ~ attributes.render('class')\|tailwind_merge }}"`
`3`	`4`	`{{ attributes }}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{# @block content The default block #}`
`1`	`2`	`<h2`
`2`	`3`	`id="{{ _alert_dialog_title_id }}"`
`3`	`4`	`class="{{ 'text-lg font-semibold ' ~ attributes.render('class')\|tailwind_merge }}"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{# @block content The default block #}`
`1`	`2`	`{%- set trigger_attrs = {`
`2`	`3`	`'data-action': 'click->alert-dialog#open',`
`3`	`4`	`'data-alert-dialog-target': 'trigger',`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+{# @prop variant 'default'\|'desctructive' The variant, default to "default" #}`
	`2`	`+{# @block content The default block #}`
`1`	`3`	`{%- props variant = 'default' -%}`
`2`	`4`	`{%- set style = html_cva(`
`3`	`5`	`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',`