@sytechui/input-otp 2.1.32

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.
Files changed (27) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +26 -0
  3. package/dist/chunk-IJHHP6DJ.mjs +46 -0
  4. package/dist/chunk-R2XKH6IK.mjs +13 -0
  5. package/dist/chunk-VZ7MKXTH.mjs +250 -0
  6. package/dist/chunk-ZVXVMEIW.mjs +72 -0
  7. package/dist/index.d.mts +9 -0
  8. package/dist/index.d.ts +9 -0
  9. package/dist/index.js +391 -0
  10. package/dist/index.mjs +19 -0
  11. package/dist/input-otp-context.d.mts +499 -0
  12. package/dist/input-otp-context.d.ts +499 -0
  13. package/dist/input-otp-context.js +37 -0
  14. package/dist/input-otp-context.mjs +9 -0
  15. package/dist/input-otp-segment.d.mts +9 -0
  16. package/dist/input-otp-segment.d.ts +9 -0
  17. package/dist/input-otp-segment.js +75 -0
  18. package/dist/input-otp-segment.mjs +8 -0
  19. package/dist/input-otp.d.mts +14 -0
  20. package/dist/input-otp.d.ts +14 -0
  21. package/dist/input-otp.js +374 -0
  22. package/dist/input-otp.mjs +10 -0
  23. package/dist/use-input-otp.d.mts +315 -0
  24. package/dist/use-input-otp.d.ts +315 -0
  25. package/dist/use-input-otp.js +273 -0
  26. package/dist/use-input-otp.mjs +7 -0
  27. package/package.json +63 -0
package/dist/input-otp-context.d.ts ADDED
@@ -0,0 +1,499 @@
1
+ import * as _sytechui_react_utils from '@sytechui/react-utils';
2
+ import * as input_otp from 'input-otp';
3
+ import * as _sytechui_theme from '@sytechui/theme';
4
+ import * as tailwind_variants from 'tailwind-variants';
5
+ import * as react from 'react';
6
+ import * as _sytechui_system from '@sytechui/system';
7
+
8
+ declare const InputOtpProvider: react.Provider<{
9
+ Component: _sytechui_system.As<any>;
10
+ inputRef: react.RefObject<HTMLInputElement>;
11
+ length: number;
12
+ value: string;
13
+ type: string | undefined;
14
+ slots: {
15
+ base: (slotProps?: ({
16
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
17
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
18
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
19
+ size?: "md" | "sm" | "lg" | undefined;
20
+ isInvalid?: boolean | undefined;
21
+ disableAnimation?: boolean | undefined;
22
+ isDisabled?: boolean | undefined;
23
+ isReadOnly?: boolean | undefined;
24
+ fullWidth?: boolean | undefined;
25
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
26
+ wrapper: (slotProps?: ({
27
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
28
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
29
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
30
+ size?: "md" | "sm" | "lg" | undefined;
31
+ isInvalid?: boolean | undefined;
32
+ disableAnimation?: boolean | undefined;
33
+ isDisabled?: boolean | undefined;
34
+ isReadOnly?: boolean | undefined;
35
+ fullWidth?: boolean | undefined;
36
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
37
+ input: (slotProps?: ({
38
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
39
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
40
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
41
+ size?: "md" | "sm" | "lg" | undefined;
42
+ isInvalid?: boolean | undefined;
43
+ disableAnimation?: boolean | undefined;
44
+ isDisabled?: boolean | undefined;
45
+ isReadOnly?: boolean | undefined;
46
+ fullWidth?: boolean | undefined;
47
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
48
+ segmentWrapper: (slotProps?: ({
49
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
50
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
51
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
52
+ size?: "md" | "sm" | "lg" | undefined;
53
+ isInvalid?: boolean | undefined;
54
+ disableAnimation?: boolean | undefined;
55
+ isDisabled?: boolean | undefined;
56
+ isReadOnly?: boolean | undefined;
57
+ fullWidth?: boolean | undefined;
58
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
59
+ segment: (slotProps?: ({
60
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
61
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
62
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
63
+ size?: "md" | "sm" | "lg" | undefined;
64
+ isInvalid?: boolean | undefined;
65
+ disableAnimation?: boolean | undefined;
66
+ isDisabled?: boolean | undefined;
67
+ isReadOnly?: boolean | undefined;
68
+ fullWidth?: boolean | undefined;
69
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
70
+ passwordChar: (slotProps?: ({
71
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
72
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
73
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
74
+ size?: "md" | "sm" | "lg" | undefined;
75
+ isInvalid?: boolean | undefined;
76
+ disableAnimation?: boolean | undefined;
77
+ isDisabled?: boolean | undefined;
78
+ isReadOnly?: boolean | undefined;
79
+ fullWidth?: boolean | undefined;
80
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
81
+ caret: (slotProps?: ({
82
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
83
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
84
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
85
+ size?: "md" | "sm" | "lg" | undefined;
86
+ isInvalid?: boolean | undefined;
87
+ disableAnimation?: boolean | undefined;
88
+ isDisabled?: boolean | undefined;
89
+ isReadOnly?: boolean | undefined;
90
+ fullWidth?: boolean | undefined;
91
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
92
+ helperWrapper: (slotProps?: ({
93
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
94
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
95
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
96
+ size?: "md" | "sm" | "lg" | undefined;
97
+ isInvalid?: boolean | undefined;
98
+ disableAnimation?: boolean | undefined;
99
+ isDisabled?: boolean | undefined;
100
+ isReadOnly?: boolean | undefined;
101
+ fullWidth?: boolean | undefined;
102
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
103
+ errorMessage: (slotProps?: ({
104
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
105
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
106
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
107
+ size?: "md" | "sm" | "lg" | undefined;
108
+ isInvalid?: boolean | undefined;
109
+ disableAnimation?: boolean | undefined;
110
+ isDisabled?: boolean | undefined;
111
+ isReadOnly?: boolean | undefined;
112
+ fullWidth?: boolean | undefined;
113
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
114
+ description: (slotProps?: ({
115
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
116
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
117
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
118
+ size?: "md" | "sm" | "lg" | undefined;
119
+ isInvalid?: boolean | undefined;
120
+ disableAnimation?: boolean | undefined;
121
+ isDisabled?: boolean | undefined;
122
+ isReadOnly?: boolean | undefined;
123
+ fullWidth?: boolean | undefined;
124
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
125
+ } & {
126
+ base: (slotProps?: ({
127
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
128
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
129
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
130
+ size?: "md" | "sm" | "lg" | undefined;
131
+ isInvalid?: boolean | undefined;
132
+ disableAnimation?: boolean | undefined;
133
+ isDisabled?: boolean | undefined;
134
+ isReadOnly?: boolean | undefined;
135
+ fullWidth?: boolean | undefined;
136
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
137
+ wrapper: (slotProps?: ({
138
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
139
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
140
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
141
+ size?: "md" | "sm" | "lg" | undefined;
142
+ isInvalid?: boolean | undefined;
143
+ disableAnimation?: boolean | undefined;
144
+ isDisabled?: boolean | undefined;
145
+ isReadOnly?: boolean | undefined;
146
+ fullWidth?: boolean | undefined;
147
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
148
+ input: (slotProps?: ({
149
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
150
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
151
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
152
+ size?: "md" | "sm" | "lg" | undefined;
153
+ isInvalid?: boolean | undefined;
154
+ disableAnimation?: boolean | undefined;
155
+ isDisabled?: boolean | undefined;
156
+ isReadOnly?: boolean | undefined;
157
+ fullWidth?: boolean | undefined;
158
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
159
+ segmentWrapper: (slotProps?: ({
160
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
161
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
162
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
163
+ size?: "md" | "sm" | "lg" | undefined;
164
+ isInvalid?: boolean | undefined;
165
+ disableAnimation?: boolean | undefined;
166
+ isDisabled?: boolean | undefined;
167
+ isReadOnly?: boolean | undefined;
168
+ fullWidth?: boolean | undefined;
169
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
170
+ segment: (slotProps?: ({
171
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
172
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
173
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
174
+ size?: "md" | "sm" | "lg" | undefined;
175
+ isInvalid?: boolean | undefined;
176
+ disableAnimation?: boolean | undefined;
177
+ isDisabled?: boolean | undefined;
178
+ isReadOnly?: boolean | undefined;
179
+ fullWidth?: boolean | undefined;
180
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
181
+ passwordChar: (slotProps?: ({
182
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
183
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
184
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
185
+ size?: "md" | "sm" | "lg" | undefined;
186
+ isInvalid?: boolean | undefined;
187
+ disableAnimation?: boolean | undefined;
188
+ isDisabled?: boolean | undefined;
189
+ isReadOnly?: boolean | undefined;
190
+ fullWidth?: boolean | undefined;
191
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
192
+ caret: (slotProps?: ({
193
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
194
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
195
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
196
+ size?: "md" | "sm" | "lg" | undefined;
197
+ isInvalid?: boolean | undefined;
198
+ disableAnimation?: boolean | undefined;
199
+ isDisabled?: boolean | undefined;
200
+ isReadOnly?: boolean | undefined;
201
+ fullWidth?: boolean | undefined;
202
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
203
+ helperWrapper: (slotProps?: ({
204
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
205
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
206
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
207
+ size?: "md" | "sm" | "lg" | undefined;
208
+ isInvalid?: boolean | undefined;
209
+ disableAnimation?: boolean | undefined;
210
+ isDisabled?: boolean | undefined;
211
+ isReadOnly?: boolean | undefined;
212
+ fullWidth?: boolean | undefined;
213
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
214
+ errorMessage: (slotProps?: ({
215
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
216
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
217
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
218
+ size?: "md" | "sm" | "lg" | undefined;
219
+ isInvalid?: boolean | undefined;
220
+ disableAnimation?: boolean | undefined;
221
+ isDisabled?: boolean | undefined;
222
+ isReadOnly?: boolean | undefined;
223
+ fullWidth?: boolean | undefined;
224
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
225
+ description: (slotProps?: ({
226
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
227
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
228
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
229
+ size?: "md" | "sm" | "lg" | undefined;
230
+ isInvalid?: boolean | undefined;
231
+ disableAnimation?: boolean | undefined;
232
+ isDisabled?: boolean | undefined;
233
+ isReadOnly?: boolean | undefined;
234
+ fullWidth?: boolean | undefined;
235
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
236
+ } & {};
237
+ hasHelper: boolean;
238
+ classNames: _sytechui_theme.SlotsToClasses<"base" | "wrapper" | "input" | "segmentWrapper" | "segment" | "passwordChar" | "caret" | "helperWrapper" | "errorMessage" | "description"> | undefined;
239
+ isInvalid: boolean;
240
+ description: react.ReactNode;
241
+ errorMessage: react.ReactNode;
242
+ isFocusVisible: boolean;
243
+ isFocused: boolean;
244
+ getBaseProps: _sytechui_system.PropGetter;
245
+ getInputOtpProps: (props?: Partial<input_otp.OTPInputProps>) => Omit<input_otp.OTPInputProps, "children" | "render"> & {
246
+ ref?: _sytechui_react_utils.ReactRef<HTMLInputElement>;
247
+ };
248
+ getSegmentWrapperProps: _sytechui_system.PropGetter;
249
+ getHelperWrapperProps: _sytechui_system.PropGetter;
250
+ getErrorMessageProps: _sytechui_system.PropGetter;
251
+ getDescriptionProps: _sytechui_system.PropGetter;
252
+ }>;
253
+ declare const useInputOtpContext: () => {
254
+ Component: _sytechui_system.As<any>;
255
+ inputRef: react.RefObject<HTMLInputElement>;
256
+ length: number;
257
+ value: string;
258
+ type: string | undefined;
259
+ slots: {
260
+ base: (slotProps?: ({
261
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
262
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
263
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
264
+ size?: "md" | "sm" | "lg" | undefined;
265
+ isInvalid?: boolean | undefined;
266
+ disableAnimation?: boolean | undefined;
267
+ isDisabled?: boolean | undefined;
268
+ isReadOnly?: boolean | undefined;
269
+ fullWidth?: boolean | undefined;
270
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
271
+ wrapper: (slotProps?: ({
272
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
273
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
274
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
275
+ size?: "md" | "sm" | "lg" | undefined;
276
+ isInvalid?: boolean | undefined;
277
+ disableAnimation?: boolean | undefined;
278
+ isDisabled?: boolean | undefined;
279
+ isReadOnly?: boolean | undefined;
280
+ fullWidth?: boolean | undefined;
281
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
282
+ input: (slotProps?: ({
283
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
284
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
285
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
286
+ size?: "md" | "sm" | "lg" | undefined;
287
+ isInvalid?: boolean | undefined;
288
+ disableAnimation?: boolean | undefined;
289
+ isDisabled?: boolean | undefined;
290
+ isReadOnly?: boolean | undefined;
291
+ fullWidth?: boolean | undefined;
292
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
293
+ segmentWrapper: (slotProps?: ({
294
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
295
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
296
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
297
+ size?: "md" | "sm" | "lg" | undefined;
298
+ isInvalid?: boolean | undefined;
299
+ disableAnimation?: boolean | undefined;
300
+ isDisabled?: boolean | undefined;
301
+ isReadOnly?: boolean | undefined;
302
+ fullWidth?: boolean | undefined;
303
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
304
+ segment: (slotProps?: ({
305
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
306
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
307
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
308
+ size?: "md" | "sm" | "lg" | undefined;
309
+ isInvalid?: boolean | undefined;
310
+ disableAnimation?: boolean | undefined;
311
+ isDisabled?: boolean | undefined;
312
+ isReadOnly?: boolean | undefined;
313
+ fullWidth?: boolean | undefined;
314
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
315
+ passwordChar: (slotProps?: ({
316
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
317
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
318
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
319
+ size?: "md" | "sm" | "lg" | undefined;
320
+ isInvalid?: boolean | undefined;
321
+ disableAnimation?: boolean | undefined;
322
+ isDisabled?: boolean | undefined;
323
+ isReadOnly?: boolean | undefined;
324
+ fullWidth?: boolean | undefined;
325
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
326
+ caret: (slotProps?: ({
327
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
328
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
329
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
330
+ size?: "md" | "sm" | "lg" | undefined;
331
+ isInvalid?: boolean | undefined;
332
+ disableAnimation?: boolean | undefined;
333
+ isDisabled?: boolean | undefined;
334
+ isReadOnly?: boolean | undefined;
335
+ fullWidth?: boolean | undefined;
336
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
337
+ helperWrapper: (slotProps?: ({
338
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
339
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
340
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
341
+ size?: "md" | "sm" | "lg" | undefined;
342
+ isInvalid?: boolean | undefined;
343
+ disableAnimation?: boolean | undefined;
344
+ isDisabled?: boolean | undefined;
345
+ isReadOnly?: boolean | undefined;
346
+ fullWidth?: boolean | undefined;
347
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
348
+ errorMessage: (slotProps?: ({
349
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
350
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
351
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
352
+ size?: "md" | "sm" | "lg" | undefined;
353
+ isInvalid?: boolean | undefined;
354
+ disableAnimation?: boolean | undefined;
355
+ isDisabled?: boolean | undefined;
356
+ isReadOnly?: boolean | undefined;
357
+ fullWidth?: boolean | undefined;
358
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
359
+ description: (slotProps?: ({
360
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
361
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
362
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
363
+ size?: "md" | "sm" | "lg" | undefined;
364
+ isInvalid?: boolean | undefined;
365
+ disableAnimation?: boolean | undefined;
366
+ isDisabled?: boolean | undefined;
367
+ isReadOnly?: boolean | undefined;
368
+ fullWidth?: boolean | undefined;
369
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
370
+ } & {
371
+ base: (slotProps?: ({
372
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
373
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
374
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
375
+ size?: "md" | "sm" | "lg" | undefined;
376
+ isInvalid?: boolean | undefined;
377
+ disableAnimation?: boolean | undefined;
378
+ isDisabled?: boolean | undefined;
379
+ isReadOnly?: boolean | undefined;
380
+ fullWidth?: boolean | undefined;
381
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
382
+ wrapper: (slotProps?: ({
383
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
384
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
385
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
386
+ size?: "md" | "sm" | "lg" | undefined;
387
+ isInvalid?: boolean | undefined;
388
+ disableAnimation?: boolean | undefined;
389
+ isDisabled?: boolean | undefined;
390
+ isReadOnly?: boolean | undefined;
391
+ fullWidth?: boolean | undefined;
392
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
393
+ input: (slotProps?: ({
394
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
395
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
396
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
397
+ size?: "md" | "sm" | "lg" | undefined;
398
+ isInvalid?: boolean | undefined;
399
+ disableAnimation?: boolean | undefined;
400
+ isDisabled?: boolean | undefined;
401
+ isReadOnly?: boolean | undefined;
402
+ fullWidth?: boolean | undefined;
403
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
404
+ segmentWrapper: (slotProps?: ({
405
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
406
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
407
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
408
+ size?: "md" | "sm" | "lg" | undefined;
409
+ isInvalid?: boolean | undefined;
410
+ disableAnimation?: boolean | undefined;
411
+ isDisabled?: boolean | undefined;
412
+ isReadOnly?: boolean | undefined;
413
+ fullWidth?: boolean | undefined;
414
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
415
+ segment: (slotProps?: ({
416
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
417
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
418
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
419
+ size?: "md" | "sm" | "lg" | undefined;
420
+ isInvalid?: boolean | undefined;
421
+ disableAnimation?: boolean | undefined;
422
+ isDisabled?: boolean | undefined;
423
+ isReadOnly?: boolean | undefined;
424
+ fullWidth?: boolean | undefined;
425
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
426
+ passwordChar: (slotProps?: ({
427
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
428
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
429
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
430
+ size?: "md" | "sm" | "lg" | undefined;
431
+ isInvalid?: boolean | undefined;
432
+ disableAnimation?: boolean | undefined;
433
+ isDisabled?: boolean | undefined;
434
+ isReadOnly?: boolean | undefined;
435
+ fullWidth?: boolean | undefined;
436
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
437
+ caret: (slotProps?: ({
438
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
439
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
440
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
441
+ size?: "md" | "sm" | "lg" | undefined;
442
+ isInvalid?: boolean | undefined;
443
+ disableAnimation?: boolean | undefined;
444
+ isDisabled?: boolean | undefined;
445
+ isReadOnly?: boolean | undefined;
446
+ fullWidth?: boolean | undefined;
447
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
448
+ helperWrapper: (slotProps?: ({
449
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
450
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
451
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
452
+ size?: "md" | "sm" | "lg" | undefined;
453
+ isInvalid?: boolean | undefined;
454
+ disableAnimation?: boolean | undefined;
455
+ isDisabled?: boolean | undefined;
456
+ isReadOnly?: boolean | undefined;
457
+ fullWidth?: boolean | undefined;
458
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
459
+ errorMessage: (slotProps?: ({
460
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
461
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
462
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
463
+ size?: "md" | "sm" | "lg" | undefined;
464
+ isInvalid?: boolean | undefined;
465
+ disableAnimation?: boolean | undefined;
466
+ isDisabled?: boolean | undefined;
467
+ isReadOnly?: boolean | undefined;
468
+ fullWidth?: boolean | undefined;
469
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
470
+ description: (slotProps?: ({
471
+ variant?: "flat" | "faded" | "bordered" | "underlined" | undefined;
472
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
473
+ radius?: "md" | "none" | "sm" | "lg" | "full" | undefined;
474
+ size?: "md" | "sm" | "lg" | undefined;
475
+ isInvalid?: boolean | undefined;
476
+ disableAnimation?: boolean | undefined;
477
+ isDisabled?: boolean | undefined;
478
+ isReadOnly?: boolean | undefined;
479
+ fullWidth?: boolean | undefined;
480
+ } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
481
+ } & {};
482
+ hasHelper: boolean;
483
+ classNames: _sytechui_theme.SlotsToClasses<"base" | "wrapper" | "input" | "segmentWrapper" | "segment" | "passwordChar" | "caret" | "helperWrapper" | "errorMessage" | "description"> | undefined;
484
+ isInvalid: boolean;
485
+ description: react.ReactNode;
486
+ errorMessage: react.ReactNode;
487
+ isFocusVisible: boolean;
488
+ isFocused: boolean;
489
+ getBaseProps: _sytechui_system.PropGetter;
490
+ getInputOtpProps: (props?: Partial<input_otp.OTPInputProps>) => Omit<input_otp.OTPInputProps, "children" | "render"> & {
491
+ ref?: _sytechui_react_utils.ReactRef<HTMLInputElement>;
492
+ };
493
+ getSegmentWrapperProps: _sytechui_system.PropGetter;
494
+ getHelperWrapperProps: _sytechui_system.PropGetter;
495
+ getErrorMessageProps: _sytechui_system.PropGetter;
496
+ getDescriptionProps: _sytechui_system.PropGetter;
497
+ };
498
+
499
+ export { InputOtpProvider, useInputOtpContext };
package/dist/input-otp-context.js ADDED
@@ -0,0 +1,37 @@
1
+ "use client";
2
+ "use strict";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/input-otp-context.ts
22
+ var input_otp_context_exports = {};
23
+ __export(input_otp_context_exports, {
24
+ InputOtpProvider: () => InputOtpProvider,
25
+ useInputOtpContext: () => useInputOtpContext
26
+ });
27
+ module.exports = __toCommonJS(input_otp_context_exports);
28
+ var import_react_utils = require("@sytechui/react-utils");
29
+ var [InputOtpProvider, useInputOtpContext] = (0, import_react_utils.createContext)({
30
+ name: "InputOtpContext",
31
+ errorMessage: "useInputOtpContext: `context` is undefined. Seems like you forgot to wrap all input-otp components within `<InputOtp />`"
32
+ });
33
+ // Annotate the CommonJS export names for ESM import in node:
34
+ 0 && (module.exports = {
35
+ InputOtpProvider,
36
+ useInputOtpContext
37
+ });
package/dist/input-otp-context.mjs ADDED
@@ -0,0 +1,9 @@
1
+ "use client";
2
+ import {
3
+ InputOtpProvider,
4
+ useInputOtpContext
5
+ } from "./chunk-R2XKH6IK.mjs";
6
+ export {
7
+ InputOtpProvider,
8
+ useInputOtpContext
9
+ };
package/dist/input-otp-segment.d.mts ADDED
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { SlotProps } from 'input-otp';
3
+
4
+ declare const InputOtpSegment: ({ ...props }: SlotProps & {
5
+ isFocused?: boolean;
6
+ isFocusVisible?: boolean;
7
+ }) => react_jsx_runtime.JSX.Element;
8
+
9
+ export { InputOtpSegment };
package/dist/input-otp-segment.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { SlotProps } from 'input-otp';
3
+
4
+ declare const InputOtpSegment: ({ ...props }: SlotProps & {
5
+ isFocused?: boolean;
6
+ isFocusVisible?: boolean;
7
+ }) => react_jsx_runtime.JSX.Element;
8
+
9
+ export { InputOtpSegment };
package/dist/input-otp-segment.js ADDED
@@ -0,0 +1,75 @@
1
+ "use client";
2
+ "use strict";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/input-otp-segment.tsx
22
+ var input_otp_segment_exports = {};
23
+ __export(input_otp_segment_exports, {
24
+ InputOtpSegment: () => InputOtpSegment
25
+ });
26
+ module.exports = __toCommonJS(input_otp_segment_exports);
27
+ var import_react = require("react");
28
+ var import_shared_utils = require("@sytechui/shared-utils");
29
+ var import_theme = require("@sytechui/theme");
30
+
31
+ // src/input-otp-context.ts
32
+ var import_react_utils = require("@sytechui/react-utils");
33
+ var [InputOtpProvider, useInputOtpContext] = (0, import_react_utils.createContext)({
34
+ name: "InputOtpContext",
35
+ errorMessage: "useInputOtpContext: `context` is undefined. Seems like you forgot to wrap all input-otp components within `<InputOtp />`"
36
+ });
37
+
38
+ // src/input-otp-segment.tsx
39
+ var import_jsx_runtime = require("react/jsx-runtime");
40
+ var InputOtpSegment = ({
41
+ ...props
42
+ }) => {
43
+ var _a;
44
+ const { classNames, slots, type } = useInputOtpContext();
45
+ const passwordCharStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.passwordChar);
46
+ const caretStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.caret);
47
+ const segmentStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.segment);
48
+ const displayValue = (0, import_react.useMemo)(() => {
49
+ var _a2, _b;
50
+ if (props.isActive && !props.char) {
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_theme.cn)((_a2 = slots.caret) == null ? void 0 : _a2.call(slots, { class: caretStyles })) });
52
+ }
53
+ if (props.char) {
54
+ return type === "password" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_theme.cn)((_b = slots.passwordChar) == null ? void 0 : _b.call(slots, { class: passwordCharStyles })) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: props.char });
55
+ }
56
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: props.placeholderChar });
57
+ }, [props.char, props.isActive, props.placeholderChar, type]);
58
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
59
+ "div",
60
+ {
61
+ className: (0, import_theme.cn)((_a = slots.segment) == null ? void 0 : _a.call(slots, { class: segmentStyles })),
62
+ "data-active": (0, import_shared_utils.dataAttr)(props.isActive),
63
+ "data-focus": (0, import_shared_utils.dataAttr)(props.isFocused && props.isActive),
64
+ "data-focus-visible": (0, import_shared_utils.dataAttr)(props.isFocusVisible && props.isActive),
65
+ "data-has-value": (0, import_shared_utils.dataAttr)(!!props.char),
66
+ "data-slot": "segment2",
67
+ role: "presentation",
68
+ children: displayValue
69
+ }
70
+ );
71
+ };
72
+ // Annotate the CommonJS export names for ESM import in node:
73
+ 0 && (module.exports = {
74
+ InputOtpSegment
75
+ });