[Toolkit][Shadcn] Add input-otp recipe

[Amoifr]

Q	A
Bug fix?	no
New feature?	yes
Deprecations?	no
Documentation?	no
Issues	Part of #3233
License	MIT

Adds the input-otp recipe to the Shadcn kit.

Part of the split of #3467 into one PR per component, tracking #3233.

Snapshots will be regenerated after rework.

[Amoifr]

Pattern example :

Capture.video.du.2026-04-19.15-22-22.mp4

[Amoifr]

Separator example

Capture.video.du.2026-04-19.15-23-37.mp4

[Amoifr]

Disabled example

Capture.video.du.2026-04-19.15-24-57.mp4

[Amoifr]

Controlled example :

Capture.video.du.2026-04-19.15-26-17.mp4

[Amoifr]

Invalid example

[Amoifr]

Four digits example :

Capture.video.du.2026-04-19.15-29-04.mp4

[Amoifr]

Alphanumeric example :

Capture.video.du.2026-04-19.15-30-18.mp4

[Amoifr]

Form example :

Capture.video.du.2026-04-19.15-34-48.mp4

[Amoifr]

RTL example :

Capture.video.du.2026-04-19.15-36-18.mp4

[Kocal]

Thank you for your work, it's almost perfect! 👏🏻
I just have two comments:

1. The absence of the autocomplete=“one-time-code” attribute, which prevents autocompletion from a password manager, SMS, etc...
2. The absence of a title/aria-label Input X of Y for each <twig:InputOtp:Slot>, which prevents proper accessibility.

As suggestions:

1. I think we can add the attribute to all <twig:InputOtp:Slot> elements, not just the first one, but this needs to be double-checked
2. Since TwigComponents do not have the concept of children components (like React or Vue), we'll need to make this explicit using <twig:InputOtp inputs="6"> and <twig:InputOtp:Slot input="1">, for example (if you have a better name than input, go for it!)

PS: I force pushed your branch, but I didn't commit anything, I just rebased it "on reflex" 😅 you can force push again without worries

[Amoifr]

Thanks a ton for the careful review and the helpful suggestions! 🙏 Both points addressed:

1. autocomplete="one-time-code" — added by default on every <twig:InputOtp:Slot>, users can still override per-slot (e.g. autocomplete="off") via the merged attributes.

2. Accessible Input X of Y label — went the explicit route as you suggested, with one twist: I tried first to forward inputs="6" from <twig:InputOtp> down to the Slot via the {% set _kit_var %} pattern (the one Accordion uses), but since slots live inside a <twig:InputOtp:Group> wrapper, the variable doesn't survive the extra component level (got a clean Variable "_input_otp_inputs" does not exist). So I exposed two props directly on the slot:

   <twig:InputOtp:Slot input="1" inputs="6" name="otp[0]" />

   input alone yields aria-label="Input 1", and input + inputs yields aria-label="Input 1 of 6". A bit more verbose to write, but rock-solid and matches the spirit of your suggestion. All 11 examples updated + snapshots regenerated.

And no worries about the rebase — that "force-push reflex" is a feature, not a bug 😄. Force-pushed the new commits, ready for another pass whenever you have a minute!

[Kocal]

About 2., this is related to #2522, I will try to work on it, I really don't like the current workaround 😅 🤞🏻

[Kocal]

#3512 has been merged, I didn't tweak our skill yet, but I believe you can already starts to make this recipe better ;)