[Toolkit][Shadcn] Add input-otp recipe

src/Toolkit/CHANGELOG.md

@@ -13,6 +13,7 @@
 - [Shadcn] Add `collapsible` recipe
 - [Shadcn] Add `typography` recipe
 - [Shadcn] Add `toggle-group` recipe
+- [Shadcn] Add `input-otp` recipe
 
 ## 2.35
 

src/Toolkit/kits/shadcn/input-otp/examples/Demo.html.twig

@@ -0,0 +1,9 @@
+<twig:InputOtp>
+    <twig:InputOtp:Slot name="otp[0]" />
+    <twig:InputOtp:Slot name="otp[1]" />
+    <twig:InputOtp:Slot name="otp[2]" />
+    <twig:InputOtp:Separator />
+    <twig:InputOtp:Slot name="otp[3]" />
+    <twig:InputOtp:Slot name="otp[4]" />
+    <twig:InputOtp:Slot name="otp[5]" />
+</twig:InputOtp>

src/Toolkit/kits/shadcn/input-otp/examples/Usage.html.twig

@@ -0,0 +1,8 @@
+<twig:InputOtp>
+    <twig:InputOtp:Slot name="otp[0]" />
+    <twig:InputOtp:Slot name="otp[1]" />
+    <twig:InputOtp:Slot name="otp[2]" />
+    <twig:InputOtp:Slot name="otp[3]" />
+    <twig:InputOtp:Slot name="otp[4]" />
+    <twig:InputOtp:Slot name="otp[5]" />
+</twig:InputOtp>

src/Toolkit/kits/shadcn/input-otp/manifest.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Input OTP",
+    "description": "A group of single-character inputs for one-time passwords and verification codes.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/input-otp/templates/components/InputOtp.html.twig

@@ -0,0 +1,9 @@
+{# @block content The OTP slot inputs, typically multiple `InputOtp:Slot` components #}
+<div
+    class="{{ ('flex items-center gap-2 has-[:disabled]:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'input-otp',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/input-otp/templates/components/InputOtp/Separator.html.twig

@@ -0,0 +1,8 @@
+<span
+    role="separator"
+    class="{{ ('text-muted-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'input-otp-separator',
+    }) }}
+    aria-hidden="true"
+>-</span>

src/Toolkit/kits/shadcn/input-otp/templates/components/InputOtp/Slot.html.twig

@@ -0,0 +1,8 @@
+<input
+    type="text"
+    inputmode="numeric"
+    maxlength="1"
+    class="{{ ('relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
+    data-slot="input-otp-slot"
+    {{ attributes }}
+>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-otp, code file Demo.html__1.html

@@ -0,0 +1,25 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input OTP
+- Code:
+```twig
+<twig:InputOtp>
+    <twig:InputOtp:Slot name="otp[0]" />
+    <twig:InputOtp:Slot name="otp[1]" />
+    <twig:InputOtp:Slot name="otp[2]" />
+    <twig:InputOtp:Separator />
+    <twig:InputOtp:Slot name="otp[3]" />
+    <twig:InputOtp:Slot name="otp[4]" />
+    <twig:InputOtp:Slot name="otp[5]" />
+</twig:InputOtp>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center gap-2 has-[:disabled]:opacity-50" data-slot="input-otp">
+<input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[0]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[1]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[2]">
+    <span role="separator" class="text-muted-foreground" data-slot="input-otp-separator" aria-hidden="true">-</span>
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[3]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[4]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[5]">
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component input-otp, code file Usage.html__1.html

@@ -0,0 +1,23 @@
+<!--
+- Kit: Shadcn UI
+- Component: Input OTP
+- Code:
+```twig
+<twig:InputOtp>
+    <twig:InputOtp:Slot name="otp[0]" />
+    <twig:InputOtp:Slot name="otp[1]" />
+    <twig:InputOtp:Slot name="otp[2]" />
+    <twig:InputOtp:Slot name="otp[3]" />
+    <twig:InputOtp:Slot name="otp[4]" />
+    <twig:InputOtp:Slot name="otp[5]" />
+</twig:InputOtp>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex items-center gap-2 has-[:disabled]:opacity-50" data-slot="input-otp">
+<input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[0]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[1]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[2]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[3]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[4]">
+    <input type="text" inputmode="numeric" maxlength="1" class="relative flex h-10 w-10 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-all outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50" data-slot="input-otp-slot" name="otp[5]">
+</div>