format project

This commit is contained in:
Benjamin Palko 2026-08-11 16:25:07 -04:00
parent 7651afaa0b
commit a6d4064af8
83 changed files with 942 additions and 536 deletions

View file

@ -1,26 +1,37 @@
### OTP
OTP (One-Time Password) component for inputting verification codes. It's usually 4 to 6 digits long and is used for two-factor authentication (2FA) or passwordless login.
[OTP docs](https://daisyui.com/components/otp/)
#### Class names
- component: `otp`
- size: `otp-xs`, `otp-sm`, `otp-md`, `otp-lg`, `otp-xl`
- modifier: `otp-joined`
- color: `otp-neutral`, `otp-primary`, `otp-secondary`, `otp-accent`, `otp-info`, `otp-success`, `otp-warning`, `otp-error`
#### Syntax
```html
<label class="otp {MODIFIER}">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
<span></span>
<span></span>
<span></span>
<span></span>
<input
type="text"
autocomplete="one-time-code"
inputmode="numeric"
maxlength="4"
pattern="[0-9]{4}"
required
/>
</label>
```
#### Rules
- {MODIFIER} is optional and can have one of the size/color class names
- `otp-joined` modifier connects the character boxes together
- the `otp` class is for a label. The label should have 4 to 6 empty `<span>` elements for the visual representation of each digit and an input field for entering the code