@etus/ui 0.1.0

package/src/components/forms/InputOTP/index.ts

@@ -0,0 +1,18 @@
+export * from './InputOTP'
+export {
+  inputOTPCaretInnerStyles,
+  inputOTPCaretStyles,
+  type InputOTPContainerVariantProps,
+  inputOTPContainerVariants,
+  inputOTPGroupVariants,
+  type InputOTPSlotVariantProps,
+  inputOTPSlotVariants,
+} from './InputOTP.variants'
+export type {
+  InputOTPExtraProps,
+  InputOTPGroupProps,
+  InputOTPProps,
+  InputOTPSeparatorProps,
+  InputOTPSize,
+  InputOTPSlotProps,
+} from './InputOTP.types'

package/src/components/forms/InputOTPField/InputOTPField.test.tsx

@@ -0,0 +1,220 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest"
+
+import { InputOTPField } from "./InputOTPField"
+
+expect.extend(toHaveNoViolations)
+
+// Mock document.elementFromPoint which is not implemented in jsdom
+// but is used by input-otp library
+beforeAll(() => {
+  document.elementFromPoint = vi.fn(() => null)
+})
+
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
+describe("InputOTPField", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<InputOTPField label="Verification Code" />)
+      expect(screen.getByText("Verification Code")).toBeInTheDocument()
+    })
+
+    it("renders 6 slots by default", () => {
+      render(<InputOTPField />)
+      const slots = screen.getAllByRole("textbox")
+      // InputOTP renders slots within a container
+      expect(slots).toHaveLength(1) // Main input
+    })
+
+    it("renders with label", () => {
+      render(<InputOTPField label="Enter Code" />)
+      expect(screen.getByText("Enter Code")).toBeInTheDocument()
+    })
+
+    it("renders with description", () => {
+      render(<InputOTPField description="Check your email for the code" />)
+      expect(screen.getByText("Check your email for the code")).toBeInTheDocument()
+    })
+
+    it("renders with error message", () => {
+      render(<InputOTPField errorMessage="Invalid code" />)
+      expect(screen.getByText("Invalid code")).toBeInTheDocument()
+    })
+
+    it("shows error message instead of description when both provided", () => {
+      render(
+        <InputOTPField
+          description="Check your email"
+          errorMessage="Invalid code"
+        />
+      )
+      expect(screen.getByText("Invalid code")).toBeInTheDocument()
+      expect(screen.queryByText("Check your email")).not.toBeInTheDocument()
+    })
+
+    it("renders required indicator", () => {
+      render(<InputOTPField required label="Code" />)
+      expect(screen.getByText("*")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(<InputOTPField defaultValue="123456" />)
+      expect(screen.getByRole("textbox")).toHaveValue("123456")
+    })
+
+    it("renders with controlled value", () => {
+      render(<InputOTPField value="654321" onChange={() => {}} />)
+      expect(screen.getByRole("textbox")).toHaveValue("654321")
+    })
+  })
+
+  // ============================================
+  // DIGITS CONFIGURATION TESTS
+  // ============================================
+  describe("Digits Configuration", () => {
+    it("renders 6 digit configuration by default", () => {
+      const { container } = render(<InputOTPField />)
+      // 6 digits creates 2 groups with separator
+      const groups = container.querySelectorAll('[data-slot="input-otp-group"]')
+      expect(groups.length).toBe(2)
+    })
+
+    it("renders 4 digit configuration", () => {
+      const { container } = render(<InputOTPField digits={4} />)
+      // 4 digits creates 1 group without separator
+      const groups = container.querySelectorAll('[data-slot="input-otp-group"]')
+      expect(groups.length).toBe(1)
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<InputOTPField disabled />)
+      expect(screen.getByRole("textbox")).toBeDisabled()
+    })
+
+    it("handles error state with aria-invalid", () => {
+      render(<InputOTPField errorMessage="Error" />)
+      expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("sets aria-required when required", () => {
+      render(<InputOTPField required />)
+      expect(screen.getByRole("textbox")).toHaveAttribute("aria-required", "true")
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when value changes", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<InputOTPField onChange={handleChange} />)
+
+      await user.type(screen.getByRole("textbox"), "1")
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("calls onComplete when all digits entered", async () => {
+      const user = userEvent.setup()
+      const handleComplete = vi.fn()
+      render(<InputOTPField digits={4} onComplete={handleComplete} />)
+
+      await user.type(screen.getByRole("textbox"), "1234")
+      expect(handleComplete).toHaveBeenCalledWith("1234")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      const { container } = render(<InputOTPField />)
+      const slot = container.querySelector('[data-slot="input-otp-slot"]')
+      expect(slot).toHaveClass("size-[var(--input-otp-slot-size-md-size)]")
+    })
+
+    it("applies sm size", () => {
+      const { container } = render(<InputOTPField size="sm" />)
+      const slot = container.querySelector('[data-slot="input-otp-slot"]')
+      expect(slot).toHaveClass("size-[var(--input-otp-slot-size-sm-size)]")
+    })
+
+    it("applies lg size", () => {
+      const { container } = render(<InputOTPField size="lg" />)
+      const slot = container.querySelector('[data-slot="input-otp-slot"]')
+      expect(slot).toHaveClass("size-[var(--input-otp-slot-size-lg-size)]")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <InputOTPField
+          description="Enter the 6-digit code"
+          label="Verification Code"
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with error state", async () => {
+      const { container } = render(
+        <InputOTPField
+          errorMessage="Invalid verification code"
+          label="Code"
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("associates description with aria-describedby", () => {
+      render(<InputOTPField description="Help text" />)
+      const input = screen.getByRole("textbox")
+      const describedBy = input.getAttribute("aria-describedby")
+      expect(describedBy).toBeTruthy()
+    })
+
+    it("associates error with aria-describedby", () => {
+      render(<InputOTPField errorMessage="Error text" />)
+      const input = screen.getByRole("textbox")
+      const describedBy = input.getAttribute("aria-describedby")
+      expect(describedBy).toBeTruthy()
+    })
+
+    it("disabled input has no violations", async () => {
+      const { container } = render(
+        <InputOTPField disabled label="Code" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("required input has no violations", async () => {
+      const { container } = render(
+        <InputOTPField required label="Required Code" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/forms/InputOTPField/InputOTPField.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import type { InputOTPFieldProps } from "./InputOTPField.types"
+
+import { useId } from "react"
+
+import { Field, FieldDescription, FieldError, FieldLabel } from "../Field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "../InputOTP"
+
+/**
+ * InputOTPField - A complete OTP input field with label, description, and error handling
+ *
+ * @example
+ * ```tsx
+ * // 6-digit OTP with two groups
+ * <InputOTPField
+ *   label="Verification Code"
+ *   description="Enter the 6-digit code sent to your phone"
+ *   digits={6}
+ * />
+ *
+ * // 4-digit OTP with placeholder
+ * <InputOTPField
+ *   label="PIN"
+ *   digits={4}
+ *   placeholder="0"
+ * />
+ *
+ * // With error state
+ * <InputOTPField
+ *   label="Code"
+ *   errorMessage="Invalid verification code"
+ *   digits={6}
+ * />
+ * ```
+ */
+function InputOTPField({
+  label,
+  description,
+  errorMessage,
+  required,
+  digits = 6,
+  placeholder,
+  size = "md",
+  slotSize,
+  onChange,
+  onComplete,
+  value,
+  defaultValue,
+  disabled,
+  pattern,
+  className,
+  containerClassName,
+}: InputOTPFieldProps) {
+  const id = useId()
+  const inputId = `${id}-input`
+  const descriptionId = `${id}-description`
+  const errorId = `${id}-error`
+
+  const hasError = !!errorMessage
+  const resolvedSlotSize = slotSize ?? size
+
+  // Generate slot elements based on digit count
+  // Index keys are safe here: OTP slots are static, fixed-length, never reordered
+  /* eslint-disable @eslint-react/no-array-index-key */
+  const renderSlots = () => {
+    const slotProps = {
+      size: resolvedSlotSize,
+      ...(placeholder ? { placeholder } : {}),
+    }
+
+    if (digits === 4) {
+      return (
+        <InputOTPGroup>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <InputOTPSlot key={i} index={i} {...slotProps} />
+          ))}
+        </InputOTPGroup>
+      )
+    }
+
+    // 6 digits: two groups of 3 with separator
+    return (
+      <>
+        <InputOTPGroup>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <InputOTPSlot key={i} index={i} {...slotProps} />
+          ))}
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <InputOTPSlot key={i + 3} index={i + 3} {...slotProps} />
+          ))}
+        </InputOTPGroup>
+      </>
+    )
+  }
+  /* eslint-enable @eslint-react/no-array-index-key */
+
+  return (
+    <Field>
+      {label && (
+        <FieldLabel htmlFor={inputId}>
+          {label}
+          {required && (
+            <span aria-hidden="true" className="text-destructive ml-1">
+              *
+            </span>
+          )}
+        </FieldLabel>
+      )}
+      <InputOTP
+        id={inputId}
+        maxLength={digits}
+        slotSize={resolvedSlotSize}
+        {...(onChange ? { onChange } : {})}
+        {...(onComplete ? { onComplete } : {})}
+        {...(value !== undefined ? { value } : {})}
+        {...(defaultValue !== undefined ? { defaultValue } : {})}
+        disabled={disabled}
+        {...(pattern ? { pattern } : {})}
+        {...(className ? { className } : {})}
+        {...(containerClassName ? { containerClassName } : {})}
+        aria-describedby={
+          hasError ? errorId : (description ? descriptionId : undefined)
+        }
+        aria-invalid={hasError || undefined}
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Using || intentionally: false || undefined = undefined, false ?? undefined = false
+        aria-required={required || undefined}
+      >
+        {renderSlots()}
+      </InputOTP>
+      {hasError ? (
+        <FieldError id={errorId}>{errorMessage}</FieldError>
+      ) : description ? (
+        <FieldDescription id={descriptionId}>{description}</FieldDescription>
+      ) : null}
+    </Field>
+  )
+}
+
+export { InputOTPField }

package/src/components/forms/InputOTPField/InputOTPField.types.ts

@@ -0,0 +1,91 @@
+import type { InputOTPExtraProps, InputOTPSize } from "../InputOTP"
+import type { ReactNode } from "react"
+
+/**
+ * Number of digits configuration for InputOTPField
+ */
+export type InputOTPDigits = 4 | 6
+
+/**
+ * InputOTPField component props
+ * Combines InputOTP with Field components for complete form fields
+ */
+export interface InputOTPFieldProps extends InputOTPExtraProps {
+  /**
+   * Additional class name for styling
+   */
+  className?: string
+
+  /**
+   * Default value for uncontrolled usage
+   */
+  defaultValue?: string
+
+  /**
+   * Description text displayed below the OTP input
+   * Only shown when there's no error message
+   */
+  description?: ReactNode
+
+  /**
+   * Number of OTP digits
+   * - 4: Creates a single group of 4 slots
+   * - 6: Creates two groups of 3 slots with a separator
+   * @default 6
+   */
+  digits?: InputOTPDigits
+
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean
+
+  /**
+   * Error message displayed below the OTP input
+   * Takes precedence over description
+   */
+  errorMessage?: ReactNode
+
+  /**
+   * Label text displayed above the OTP input
+   */
+  label?: ReactNode
+
+  /**
+   * Callback when OTP value changes
+   */
+  onChange?: (value: string) => void
+
+  /**
+   * Callback when all digits are entered
+   */
+  onComplete?: (value: string) => void
+
+  /**
+   * Pattern to validate input (e.g., REGEXP_ONLY_DIGITS)
+   */
+  pattern?: string
+
+  /**
+   * Placeholder character for empty slots
+   * @example "0" or "•"
+   */
+  placeholder?: string
+
+  /**
+   * Whether the field is required
+   * Adds visual indicator to the label
+   */
+  required?: boolean
+
+  /**
+   * Visual size of the OTP input slots
+   * @default "md"
+   */
+  size?: InputOTPSize
+
+  /**
+   * Current OTP value
+   */
+  value?: string
+}

package/src/components/forms/InputOTPField/InputOTPField.variants.ts

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * InputOTPField container variant styles using CVA
+ * Wraps the Field + InputOTP combination with consistent spacing
+ */
+export const inputOTPFieldVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * InputOTPField label variant styles using CVA
+ */
+export const inputOTPFieldLabelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * InputOTPField description variant styles using CVA
+ */
+export const inputOTPFieldDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * InputOTPField error variant styles using CVA
+ */
+export const inputOTPFieldErrorVariants = cva(
+  "text-destructive font-medium",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export type InputOTPFieldVariantProps = VariantProps<typeof inputOTPFieldVariants>
+export type InputOTPFieldLabelVariantProps = VariantProps<typeof inputOTPFieldLabelVariants>
+export type InputOTPFieldDescriptionVariantProps = VariantProps<typeof inputOTPFieldDescriptionVariants>
+export type InputOTPFieldErrorVariantProps = VariantProps<typeof inputOTPFieldErrorVariants>