Adding a input otp component

huntabyte / shadcn-svelte

shadcn/ui, but for Svelte. ✨

https://shadcn-svelte.com

MIT License

4.38k stars 276 forks source link

Adding a input otp component #1107

Open VerburgtJimmy opened 1 month ago

VerburgtJimmy commented 1 month ago

Describe the feature

I saw that the react based shadcn/ui (https://ui.shadcn.com/docs/components/input-otp) created a new input otp component. So since I also need this component for my own project i thought I could help out by start creating this component for this library. The component is based on the bits-ui input otp(https://www.bits-ui.com/docs/components/pin-input) component but shares the visuals and functionality of the shadcn/ui input otp component. See photo for example running locally. The full functionality is not done yet and there are some discussions to be had on how to implement some things but a start is always nice

I have already made a basic version in a local environment so if someone can assign me to this feature i can commit the new input otp component for what i have so far so that you guys can correct some things or provide more feedback. This component is highly requested for this package and would be a great addition.

If you need more info please ask.

victorDigital commented 1 month ago

+1 🤗

shyakadavis commented 1 month ago

VerburgtJimmy commented 4 weeks ago

Ok so we are not basing it on the bits ui for this one? But we are waiting for the same person who created the input otp wrapper/api for the react version to make a svelte variant.

shyakadavis commented 4 weeks ago

Tbh, I'm not sure. The author of input-otp hasn't made any strides in the multiple-frameworks version. At least AFAICT.

But, Hunter made a remark that there might be the possibility of making the Bits-UI version as good as the input-otp one.

Pin Input (I think we can make this as good as the input-otp library)

https://github.com/huntabyte/bits-ui/pull/469#issue-2247113476

Guess time will tell the direction this goes in.

VerburgtJimmy commented 4 weeks ago

Ah ok. I looked at the input-opt multiple frameworks branch and it looked already pretty far along for svelte but who knows how much time it will actually be before it is production ready. I will keep an eye open for a any changes and for now I will be using my own created input-otp component based on the react one.

shyakadavis commented 4 weeks ago

@VerburgtJimmy if you're ever up for it, please do share your component. 🙂

VerburgtJimmy commented 4 weeks ago

@huntabyte don't know how far you are with the svelte input-otp implementation but this is what I have and use so far. Still a work in progress but has the same features and foundation as the input-otp package for react. https://github.com/VerburgtJimmy/svelte-input-otp/tree/main

VerburgtJimmy commented 4 weeks ago

Here is a small demo video

https://github.com/huntabyte/shadcn-svelte/assets/47350871/e64d7e50-7c66-4c08-835e-7abd70ceb61f

huntabyte commented 3 weeks ago

Hey @VerburgtJimmy! Thanks for that! I'll check it out once I get through some of these higher-priority components in the Bits UI rewrite for Svelte 5 first.

VerburgtJimmy commented 3 weeks ago

Sure take all the time you need! I am developing it further and publishing it on npm as a unstyled component. That component can than be used to create the shadcn variant. And thanks for all the hard work you provide for this community👍🏻

VerburgtJimmy commented 3 weeks ago

fyi: just deployed the package. For more info see: https://svelte-input-otp.jimmyverburgt.com/