[blocks]: Add separated slot variant to InputOTP

[elcicneha]

Description

The current InputOTPSlot renders slots that connect into a pill — they share borders and only the outermost corners are rounded. A common alternative is independent slots, where each one has its own full border, rounded corners, and a small gap between them.

It's a fairly common pattern, would be nice to have it built into shadcn.

Live demo & docs

https://ui-registry-delta.vercel.app/docs/input-otp

What it looks like

// Current (grouped/pill)
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

// Proposed (separated)
<InputOTP maxLength={6}>
  <InputOTPGroup variant="separated">
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

This could be approached either way:

• A variant — a variant="separated" prop on InputOTPGroup that switches from
  shared edges to independent slots. Fully additive, no breaking changes.
• A second component — a standalone InputOTPSeparated (or similar) that ships
  as its own registry item alongside the existing one.

Happy to open a PR in whichever direction makes more sense

Example

https://ui-registry-delta.vercel.app/docs/input-otp

[rajputomsingh]

This fits best as a variant on InputOTPGroup rather than a separate component.

It’s a purely visual difference (shared vs independent borders), so variant="separated" keeps the API consistent and avoids duplication while staying composable.

A separate component would add unnecessary surface area for something that doesn’t change behavior just styling.

[elcicneha]

I agree