[Toolkit][Shadcn] Add native-select recipe

src/Toolkit/CHANGELOG.md

@@ -5,6 +5,7 @@
 - [Flowbite] Add `avatar` recipe
 - [Flowbite] Add `dropdown` recipe
 - [Shadcn] Add `hover-card` recipe
+- [Shadcn] Add `native-select` recipe
 - [Shadcn] Add `resizable` recipe
 
 ## 3.0.0

src/Toolkit/kits/shadcn/native-select/examples/Demo.html.twig

@@ -0,0 +1,7 @@
+<twig:NativeSelect>
+    <option value="">Select status</option>
+    <option value="todo">Todo</option>
+    <option value="in-progress">In Progress</option>
+    <option value="done">Done</option>
+    <option value="cancelled">Cancelled</option>
+</twig:NativeSelect>

src/Toolkit/kits/shadcn/native-select/examples/Disabled.html.twig

@@ -0,0 +1,6 @@
+<twig:NativeSelect disabled>
+    <option value="">Disabled</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</twig:NativeSelect>

src/Toolkit/kits/shadcn/native-select/examples/Groups.html.twig

@@ -0,0 +1,18 @@
+<twig:NativeSelect>
+    <option value="">Select department</option>
+    <optgroup label="Engineering">
+        <option value="frontend">Frontend</option>
+        <option value="backend">Backend</option>
+        <option value="devops">DevOps</option>
+    </optgroup>
+    <optgroup label="Sales">
+        <option value="sales-rep">Sales Rep</option>
+        <option value="account-manager">Account Manager</option>
+        <option value="sales-director">Sales Director</option>
+    </optgroup>
+    <optgroup label="Operations">
+        <option value="support">Customer Support</option>
+        <option value="product-manager">Product Manager</option>
+        <option value="ops-manager">Operations Manager</option>
+    </optgroup>
+</twig:NativeSelect>

src/Toolkit/kits/shadcn/native-select/examples/Invalid.html.twig

@@ -0,0 +1,6 @@
+<twig:NativeSelect aria-invalid="true">
+    <option value="">Error state</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</twig:NativeSelect>

src/Toolkit/kits/shadcn/native-select/examples/RTL.html.twig

@@ -0,0 +1,23 @@
+<div class="flex flex-col items-center gap-4">
+    {# Arabic #}
+    <div dir="rtl">
+        <twig:NativeSelect>
+            <option value="">اختر الحالة</option>
+            <option value="todo">مهام</option>
+            <option value="in-progress">قيد التنفيذ</option>
+            <option value="done">منجز</option>
+            <option value="cancelled">ملغي</option>
+        </twig:NativeSelect>
+    </div>
+
+    {# Hebrew #}
+    <div dir="rtl">
+        <twig:NativeSelect>
+            <option value="">בחר סטטוס</option>
+            <option value="todo">לעשות</option>
+            <option value="in-progress">בתהליך</option>
+            <option value="done">הושלם</option>
+            <option value="cancelled">בוטל</option>
+        </twig:NativeSelect>
+    </div>
+</div>

src/Toolkit/kits/shadcn/native-select/examples/Usage.html.twig

@@ -0,0 +1,6 @@
+<twig:NativeSelect>
+    <option value="">Select a fruit</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</twig:NativeSelect>

src/Toolkit/kits/shadcn/native-select/manifest.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Native Select",
+    "description": "A styled native `<select>` element.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["symfony/ux-icons", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/native-select/templates/components/NativeSelect.html.twig

@@ -0,0 +1,19 @@
+{# @prop size 'default'|'sm' The select size. Defaults to `default` #}
+{# @block content The `<option>` and `<optgroup>` elements #}
+{%- props size = 'default' -%}
+<div
+    class="{{ ('group/native-select relative w-fit has-[select:disabled]:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
+    data-slot="native-select-wrapper"
+    data-size="{{ size }}"
+>
+    <select
+        class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&_option]:bg-background [&_option]:text-foreground [&_optgroup]:bg-background [&_optgroup]:text-foreground"
+        {{ attributes.defaults({
+            'data-slot': 'native-select',
+            'data-size': size,
+        }) }}
+    >
+        {%- block content %}{% endblock -%}
+    </select>
+    <twig:ux:icon name="lucide:chevron-down" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon" />
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component native-select, code file Demo.html.twig__1.html

@@ -0,0 +1,23 @@
+<!--
+- Kit: Shadcn UI
+- Component: Native Select
+- Code:
+```twig
+<twig:NativeSelect>
+    <option value="">Select status</option>
+    <option value="todo">Todo</option>
+    <option value="in-progress">In Progress</option>
+    <option value="done">Done</option>
+    <option value="cancelled">Cancelled</option>
+</twig:NativeSelect>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper" data-size="default">
+    <select class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&amp;_option]:bg-background [&amp;_option]:text-foreground [&amp;_optgroup]:bg-background [&amp;_optgroup]:text-foreground" data-slot="native-select" data-size="default"><option value="">Select status</option>
+    <option value="todo">Todo</option>
+    <option value="in-progress">In Progress</option>
+    <option value="done">Done</option>
+    <option value="cancelled">Cancelled</option>
+</select>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component native-select, code file Disabled.html.twig__1.html

@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Native Select
+- Code:
+```twig
+<twig:NativeSelect disabled>
+    <option value="">Disabled</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</twig:NativeSelect>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper" data-size="default">
+    <select class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&amp;_option]:bg-background [&amp;_option]:text-foreground [&amp;_optgroup]:bg-background [&amp;_optgroup]:text-foreground" data-slot="native-select" data-size="default" disabled><option value="">Disabled</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</select>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component native-select, code file Groups.html.twig__1.html

@@ -0,0 +1,45 @@
+<!--
+- Kit: Shadcn UI
+- Component: Native Select
+- Code:
+```twig
+<twig:NativeSelect>
+    <option value="">Select department</option>
+    <optgroup label="Engineering">
+        <option value="frontend">Frontend</option>
+        <option value="backend">Backend</option>
+        <option value="devops">DevOps</option>
+    </optgroup>
+    <optgroup label="Sales">
+        <option value="sales-rep">Sales Rep</option>
+        <option value="account-manager">Account Manager</option>
+        <option value="sales-director">Sales Director</option>
+    </optgroup>
+    <optgroup label="Operations">
+        <option value="support">Customer Support</option>
+        <option value="product-manager">Product Manager</option>
+        <option value="ops-manager">Operations Manager</option>
+    </optgroup>
+</twig:NativeSelect>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper" data-size="default">
+    <select class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&amp;_option]:bg-background [&amp;_option]:text-foreground [&amp;_optgroup]:bg-background [&amp;_optgroup]:text-foreground" data-slot="native-select" data-size="default"><option value="">Select department</option>
+    <optgroup label="Engineering">
+        <option value="frontend">Frontend</option>
+        <option value="backend">Backend</option>
+        <option value="devops">DevOps</option>
+    </optgroup>
+    <optgroup label="Sales">
+        <option value="sales-rep">Sales Rep</option>
+        <option value="account-manager">Account Manager</option>
+        <option value="sales-director">Sales Director</option>
+    </optgroup>
+    <optgroup label="Operations">
+        <option value="support">Customer Support</option>
+        <option value="product-manager">Product Manager</option>
+        <option value="ops-manager">Operations Manager</option>
+    </optgroup>
+</select>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component native-select, code file Invalid.html.twig__1.html

@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Native Select
+- Code:
+```twig
+<twig:NativeSelect aria-invalid="true">
+    <option value="">Error state</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</twig:NativeSelect>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper" data-size="default">
+    <select class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&amp;_option]:bg-background [&amp;_option]:text-foreground [&amp;_optgroup]:bg-background [&amp;_optgroup]:text-foreground" data-slot="native-select" data-size="default" aria-invalid="true"><option value="">Error state</option>
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="blueberry">Blueberry</option>
+</select>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component native-select, code file RTL.html.twig__1.html

@@ -0,0 +1,55 @@
+<!--
+- Kit: Shadcn UI
+- Component: Native Select
+- Code:
+```twig
+<div class="flex flex-col items-center gap-4">
+    {# Arabic #}
+    <div dir="rtl">
+        <twig:NativeSelect>
+            <option value="">اختر الحالة</option>
+            <option value="todo">مهام</option>
+            <option value="in-progress">قيد التنفيذ</option>
+            <option value="done">منجز</option>
+            <option value="cancelled">ملغي</option>
+        </twig:NativeSelect>
+    </div>
+
+    {# Hebrew #}
+    <div dir="rtl">
+        <twig:NativeSelect>
+            <option value="">בחר סטטוס</option>
+            <option value="todo">לעשות</option>
+            <option value="in-progress">בתהליך</option>
+            <option value="done">הושלם</option>
+            <option value="cancelled">בוטל</option>
+        </twig:NativeSelect>
+    </div>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-col items-center gap-4">
+        <div dir="rtl">
+        <div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper" data-size="default">
+    <select class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&amp;_option]:bg-background [&amp;_option]:text-foreground [&amp;_optgroup]:bg-background [&amp;_optgroup]:text-foreground" data-slot="native-select" data-size="default"><option value="">&Oslash;&sect;&Oslash;&reg;&Oslash;&ordf;&Oslash;&plusmn; &Oslash;&sect;&Ugrave;&#132;&Oslash;&shy;&Oslash;&sect;&Ugrave;&#132;&Oslash;&copy;</option>
+            <option value="todo">&Ugrave;&#133;&Ugrave;&#135;&Oslash;&sect;&Ugrave;&#133;</option>
+            <option value="in-progress">&Ugrave;&#130;&Ugrave;&#138;&Oslash;&macr; &Oslash;&sect;&Ugrave;&#132;&Oslash;&ordf;&Ugrave;&#134;&Ugrave;&#129;&Ugrave;&#138;&Oslash;&deg;</option>
+            <option value="done">&Ugrave;&#133;&Ugrave;&#134;&Oslash;&not;&Oslash;&sup2;</option>
+            <option value="cancelled">&Ugrave;&#133;&Ugrave;&#132;&Oslash;&ordm;&Ugrave;&#138;</option>
+        </select>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+</div>
+    </div>
+
+        <div dir="rtl">
+        <div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper" data-size="default">
+    <select class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:[color-scheme:dark] [&amp;_option]:bg-background [&amp;_option]:text-foreground [&amp;_optgroup]:bg-background [&amp;_optgroup]:text-foreground" data-slot="native-select" data-size="default"><option value="">&times;&#145;&times;&#151;&times;&uml; &times;&iexcl;&times;&#152;&times;&#152;&times;&#149;&times;&iexcl;</option>
+            <option value="todo">&times;&#156;&times;&cent;&times;&copy;&times;&#149;&times;&ordf;</option>
+            <option value="in-progress">&times;&#145;&times;&ordf;&times;&#148;&times;&#156;&times;&#153;&times;&#154;</option>
+            <option value="done">&times;&#148;&times;&#149;&times;&copy;&times;&#156;&times;&#157;</option>
+            <option value="cancelled">&times;&#145;&times;&#149;&times;&#152;&times;&#156;</option>
+        </select>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="pointer-events-none absolute top-1/2 end-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none" aria-hidden="true" data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+</div>
+    </div>
+</div>