@undefine-ui/design-system 2.10.1 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/dist/index.cjs +279 -73
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -2
- package/dist/index.d.ts +16 -2
- package/dist/index.js +277 -73
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -67,6 +67,7 @@ import {
|
|
|
67
67
|
Icon,
|
|
68
68
|
Logo,
|
|
69
69
|
LoadingScreen,
|
|
70
|
+
OTPInput,
|
|
70
71
|
Table,
|
|
71
72
|
Upload
|
|
72
73
|
} from '@undefine-ui/design-system';
|
|
@@ -112,6 +113,67 @@ import { Icon } from '@undefine-ui/design-system';
|
|
|
112
113
|
|
|
113
114
|
The Icon component renders SVG icons with full theme integration and accepts any MUI Box props for flexible styling.
|
|
114
115
|
|
|
116
|
+
### OTP Input
|
|
117
|
+
|
|
118
|
+
A one-time password input component with keyboard navigation, paste support, and validation. Perfect for email/SMS verification, PIN codes, and security codes.
|
|
119
|
+
|
|
120
|
+
**Usage:**
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import { OTPInput, Field } from '@undefine-ui/design-system';
|
|
124
|
+
|
|
125
|
+
// Basic usage
|
|
126
|
+
<OTPInput
|
|
127
|
+
length={6}
|
|
128
|
+
onChange={(otp) => console.log(otp)}
|
|
129
|
+
onComplete={(otp) => console.log('Complete:', otp)}
|
|
130
|
+
helperText="Enter the 6-digit code"
|
|
131
|
+
/>
|
|
132
|
+
|
|
133
|
+
// With React Hook Form
|
|
134
|
+
<Field.OTP
|
|
135
|
+
name="verificationCode"
|
|
136
|
+
length={6}
|
|
137
|
+
helperText="Enter the code sent to your email"
|
|
138
|
+
/>
|
|
139
|
+
|
|
140
|
+
// 4-digit PIN
|
|
141
|
+
<Field.OTP
|
|
142
|
+
name="pin"
|
|
143
|
+
length={4}
|
|
144
|
+
helperText="Enter your PIN"
|
|
145
|
+
/>
|
|
146
|
+
|
|
147
|
+
// Error state
|
|
148
|
+
<OTPInput
|
|
149
|
+
length={6}
|
|
150
|
+
error
|
|
151
|
+
helperText="Invalid code. Please try again."
|
|
152
|
+
/>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
**Props:**
|
|
156
|
+
|
|
157
|
+
- `length` - Number of OTP input fields (default: `6`)
|
|
158
|
+
- `onChange` - Callback fired when OTP value changes `(otp: string) => void`
|
|
159
|
+
- `onComplete` - Callback fired when all fields are filled `(otp: string) => void`
|
|
160
|
+
- `error` - Show error state (default: `false`)
|
|
161
|
+
- `helperText` - Helper text displayed below the input
|
|
162
|
+
- `containerProps` - Props passed to the container Box component
|
|
163
|
+
|
|
164
|
+
**Features:**
|
|
165
|
+
|
|
166
|
+
- **Keyboard navigation:** Arrow keys to move between fields, Backspace to clear
|
|
167
|
+
- **Paste support:** Automatically fills all fields from clipboard
|
|
168
|
+
- **Auto-focus:** Moves to next field after entering a digit
|
|
169
|
+
- **Validation:** Only accepts numeric input
|
|
170
|
+
- **Error handling:** Visual error states with helper text
|
|
171
|
+
- **Responsive:** Adapts input size on mobile devices
|
|
172
|
+
|
|
173
|
+
**Hook Form Integration:**
|
|
174
|
+
|
|
175
|
+
The `Field.OTP` component automatically integrates with React Hook Form, providing validation and error handling out of the box.
|
|
176
|
+
|
|
115
177
|
### Logo assets
|
|
116
178
|
|
|
117
179
|
The package exports two Logo components:
|