feat: Implement OTP Field

.changeset/major-groups-rescue.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': minor
+---
+
+feat: add OTP Field

packages/core/src/constants/index.ts

@@ -21,6 +21,8 @@ export const FieldTypePrefixes = {
   DateTimeField: 'dtf',
   DateTimeSegment: 'dts',
   Calendar: 'cal',
+  OTPField: 'otp',
+  OTPSlot: 'otps',
 } as const;
 
 export const NOOP = () => {};

packages/core/src/index.ts

@@ -13,6 +13,7 @@ export * from './useSelect';
 export * from './useComboBox';
 export * from './useHiddenField';
 export * from './useCustomField';
+export * from './useOtpField';
 export * from './useDateTimeField';
 export * from './useCalendar';
 export * from './usePicker';

packages/core/src/useCalendar/useCalendar.ts

@@ -16,7 +16,7 @@
 import { fromDateToCalendarZonedDateTime, useTemporalStore } from '../useDateTimeField/useTemporalStore';
 import { PickerContextKey } from '../usePicker';
 import { registerField } from '@formwerk/devtools';
-import { useConstraintsValidator } from '../validation/useContraintsValidator';
+import { useConstraintsValidator } from '../validation/useConstraintsValidator';
 
 export interface CalendarProps {
   /**
@@ -112,12 +112,12 @@
   /**
    * The form field to use for the calendar.
    */
   field?: FormField<any>;
 
   /**
    * The schema to use for the calendar.
    */
   schema?: StandardSchema<any>;
 }
 
 export function useCalendar(_props: Reactivify<CalendarProps, 'field' | 'schema'>) {

packages/core/src/useDateTimeField/useDateTimeField.ts

@@ -12,7 +12,7 @@ import { ZonedDateTime, Calendar } from '@internationalized/date';
 import { useInputValidity } from '../validation';
 import { createDisabledContext } from '../helpers/createDisabledContext';
 import { registerField } from '@formwerk/devtools';
-import { useConstraintsValidator } from '../validation/useContraintsValidator';
+import { useConstraintsValidator } from '../validation/useConstraintsValidator';
 
 export interface DateTimeFieldProps {
   /**

packages/core/src/useDateTimeField/useDateTimeSegment.ts

@@ -45,6 +45,7 @@ interface DateTimeSegmentDomProps {
   inputmode?: string;
   autocorrect?: string;
   enterkeyhint?: string;
+  autocomplete?: string;
   'aria-valuemin'?: number;
   'aria-valuemax'?: number;
   'aria-valuenow'?: number;
@@ -207,6 +208,7 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
       'aria-label': isNonEditable() ? undefined : toValue(props.type),
       'aria-readonly': toValue(props.readonly) ? true : undefined,
       autocorrect: isNonEditable() ? undefined : 'off',
+      autocomplete: isNonEditable() ? undefined : 'off',
       spellcheck: isNonEditable() ? undefined : false,
       enterkeyhint: isNonEditable() ? undefined : isLast() ? 'done' : 'next',
       inputmode: 'none',

packages/core/src/useOtpField/index.ts

@@ -0,0 +1,3 @@
+export * from './useOtpField';
+export * from './useOtpSlot';
+export * from './types';

packages/core/src/useOtpField/types.ts

@@ -0,0 +1,19 @@
+import { InjectionKey } from 'vue';
+
+export type OtpSlotAcceptType = 'all' | 'numeric' | 'alphanumeric';
+
+export interface OtpSlotRegistration {
+  id: string;
+  focusNext(): void;
+  focusPrevious(): void;
+  setValue(value: string): void;
+  handlePaste(event: ClipboardEvent): void;
+  isLast(): boolean;
+}
+
+export interface OtpContext {
+  useSlotRegistration(): OtpSlotRegistration;
+  getMaskCharacter(): string;
+}
+
+export const OtpContextKey: InjectionKey<OtpContext> = Symbol('otp-context');