Input OTP

import {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot} from '@stroeer-labs/design-library/react';

export function InputOtpDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">6-digit code</p>
                <InputOTP maxLength={6}>
                    <InputOTPGroup>
                        <InputOTPSlot index={0} />
                        <InputOTPSlot index={1} />
                        <InputOTPSlot index={2} />
                    </InputOTPGroup>
                    <InputOTPSeparator />
                    <InputOTPGroup>
                        <InputOTPSlot index={3} />
                        <InputOTPSlot index={4} />
                        <InputOTPSlot index={5} />
                    </InputOTPGroup>
                </InputOTP>
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component} from '@angular/core';
import {HlmInputOtpImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-input-otp-demo',
    standalone: true,
    imports: [HlmInputOtpImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">6-digit code</p>
        <brn-input-otp hlmInputOtp [maxLength]="6">
          <hlm-input-otp-group>
            <hlm-input-otp-slot [index]="0" />
            <hlm-input-otp-slot [index]="1" />
            <hlm-input-otp-slot [index]="2" />
          </hlm-input-otp-group>
          <hlm-input-otp-separator />
          <hlm-input-otp-group>
            <hlm-input-otp-slot [index]="3" />
            <hlm-input-otp-slot [index]="4" />
            <hlm-input-otp-slot [index]="5" />
          </hlm-input-otp-group>
        </brn-input-otp>
      </div>
    </div>
  `,
})
export class InputOtpDemoComponent {}