@djangocfg/ui-nextjs 2.1.29 → 2.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.29",
+  "version": "2.1.30",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.29",
-    "@djangocfg/ui-core": "^2.1.29",
+    "@djangocfg/api": "^2.1.30",
+    "@djangocfg/ui-core": "^2.1.30",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -74,9 +74,11 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.4",
+    "input-otp": "1.4.2",
     "@rjsf/core": "^6.1.2",
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
@@ -104,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.29",
+    "@djangocfg/typescript-config": "^2.1.30",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/components/index.ts

@@ -84,3 +84,7 @@ export type { OptionBuilderConfig } from './multi-select-pro/helpers';
 // Markdown Components
 export { MarkdownMessage } from './markdown';
 export type { MarkdownMessageProps } from './markdown';
+
+// OTP Components (Smart OTP input with validation)
+export { OTPInput, InputOTPGroup, InputOTPSlot, InputOTPSeparator, useSmartOTP } from './otp';
+export type { OTPInputProps, OTPValidationMode, OTPPasteBehavior, OTPValidator } from './otp';

package/src/components/otp/index.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '@djangocfg/ui-core'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@djangocfg/ui-core'
+import { MinusIcon } from 'lucide-react'
+import { useSmartOTP, createPasteHandler } from './use-otp-input'
+import type { SmartOTPProps } from './types'
+
+/**
+ * Size variants for OTP slots
+ */
+const sizeVariants = {
+  sm: 'h-8 w-8 text-sm',
+  default: 'h-10 w-10 text-base',
+  lg: 'h-14 w-14 text-2xl',
+}
+
+/**
+ * OTP Separator Component
+ */
+const InputOTPSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} role="separator" className={cn('flex items-center', className)} {...props}>
+    <MinusIcon />
+  </div>
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+/**
+ * Smart OTP Input Component
+ *
+ * Features:
+ * - Automatic paste handling with cleaning
+ * - Validation (numeric, alphanumeric, alpha, custom)
+ * - Auto-submit on completion
+ * - Customizable appearance
+ * - Error/success states
+ * - Optional separator
+ *
+ * @example
+ * ```tsx
+ * <OTPInput
+ *   length={6}
+ *   value={code}
+ *   onChange={setCode}
+ *   onComplete={(value) => console.log('Complete:', value)}
+ * />
+ * ```
+ *
+ * @example With custom validation
+ * ```tsx
+ * <OTPInput
+ *   length={4}
+ *   validationMode="custom"
+ *   customValidator={(char) => /[A-F0-9]/i.test(char)}
+ *   value={hexCode}
+ *   onChange={setHexCode}
+ * />
+ * ```
+ */
+export const OTPInput = React.forwardRef<
+  React.ComponentRef<typeof InputOTP>,
+  SmartOTPProps
+>(
+  (
+    {
+      length = 6,
+      value,
+      onChange,
+      onComplete,
+      validationMode = 'numeric',
+      customValidator,
+      pasteBehavior = 'clean',
+      autoSubmit = false,
+      disabled = false,
+      showSeparator = false,
+      separatorIndex,
+      containerClassName,
+      slotClassName,
+      separatorClassName,
+      autoFocus = true,
+      size = 'default',
+      error = false,
+      success = false,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      value: otpValue,
+      handleChange,
+      handleComplete,
+    } = useSmartOTP({
+      length,
+      value,
+      onChange,
+      onComplete,
+      validationMode,
+      customValidator,
+      autoSubmit,
+    })
+
+    // Create paste handler
+    const pasteHandler = React.useMemo(
+      () =>
+        createPasteHandler(
+          length,
+          validationMode,
+          pasteBehavior,
+          handleChange,
+          customValidator
+        ),
+      [length, validationMode, pasteBehavior, handleChange, customValidator]
+    )
+
+    // Calculate separator position (default to middle)
+    const separatorPosition = separatorIndex ?? Math.floor(length / 2)
+
+    // Render slots
+    const slots = React.useMemo(() => {
+      const slotElements: React.ReactNode[] = []
+
+      for (let i = 0; i < length; i++) {
+        // Add separator if needed
+        if (showSeparator && i === separatorPosition && i !== 0) {
+          slotElements.push(
+            <InputOTPSeparator
+              key={`separator-${i}`}
+              className={cn('mx-1', separatorClassName)}
+            />
+          )
+        }
+
+        // Add slot
+        slotElements.push(
+          <InputOTPSlot
+            key={i}
+            index={i}
+            className={cn(
+              sizeVariants[size],
+              error && 'border-destructive ring-destructive/20',
+              success && 'border-green-500 ring-green-500/20',
+              slotClassName
+            )}
+          />
+        )
+      }
+
+      return slotElements
+    }, [length, showSeparator, separatorPosition, separatorClassName, size, error, success, slotClassName])
+
+    return (
+      <InputOTP
+        ref={ref}
+        maxLength={length}
+        value={otpValue}
+        onChange={handleChange}
+        onComplete={handleComplete}
+        disabled={disabled}
+        containerClassName={cn('gap-2', containerClassName)}
+        autoFocus={autoFocus}
+        onPaste={pasteHandler}
+        {...props}
+      >
+        <InputOTPGroup>{slots}</InputOTPGroup>
+      </InputOTP>
+    )
+  }
+)
+
+OTPInput.displayName = 'OTPInput'
+
+/**
+ * Re-export base components for advanced usage
+ */
+export { InputOTPGroup, InputOTPSlot } from '@djangocfg/ui-core'
+export { InputOTPSeparator }
+
+/**
+ * Re-export types
+ */
+export type {
+  SmartOTPProps as OTPInputProps,
+  OTPValidationMode,
+  OTPPasteBehavior,
+  OTPValidator,
+} from './types'
+
+/**
+ * Re-export hook for advanced usage
+ */
+export { useSmartOTP } from './use-otp-input'

package/src/components/otp/types.ts

@@ -0,0 +1,133 @@
+import type { OTPInputProps as BaseOTPInputProps } from 'input-otp'
+
+/**
+ * OTP Input validation modes
+ */
+export type OTPValidationMode = 'numeric' | 'alphanumeric' | 'alpha' | 'custom'
+
+/**
+ * OTP Input paste behavior
+ */
+export type OTPPasteBehavior = 'clean' | 'strict' | 'lenient'
+
+/**
+ * Custom validator function
+ */
+export type OTPValidator = (value: string) => boolean
+
+/**
+ * Props for the smart OTP component
+ */
+export interface SmartOTPProps {
+  /**
+   * Number of OTP slots
+   * @default 6
+   */
+  length?: number
+
+  /**
+   * Current OTP value
+   */
+  value?: string
+
+  /**
+   * Callback when value changes
+   */
+  onChange?: (value: string) => void
+
+  /**
+   * Callback when OTP is complete
+   */
+  onComplete?: (value: string) => void
+
+  /**
+   * Validation mode
+   * @default 'numeric'
+   */
+  validationMode?: OTPValidationMode
+
+  /**
+   * Custom validator function (used when validationMode is 'custom')
+   */
+  customValidator?: OTPValidator
+
+  /**
+   * Paste behavior
+   * - clean: Remove all non-valid characters
+   * - strict: Only accept paste if all characters are valid
+   * - lenient: Accept paste and keep valid characters only
+   * @default 'clean'
+   */
+  pasteBehavior?: OTPPasteBehavior
+
+  /**
+   * Auto-submit when complete
+   * @default false
+   */
+  autoSubmit?: boolean
+
+  /**
+   * Disabled state
+   */
+  disabled?: boolean
+
+  /**
+   * Show separator between slots
+   * @default false
+   */
+  showSeparator?: boolean
+
+  /**
+   * Separator position (0-based index, appears after this index)
+   */
+  separatorIndex?: number
+
+  /**
+   * Custom class name for container
+   */
+  containerClassName?: string
+
+  /**
+   * Custom class name for slots
+   */
+  slotClassName?: string
+
+  /**
+   * Custom class name for separator
+   */
+  separatorClassName?: string
+
+  /**
+   * Auto-focus first slot on mount
+   * @default true
+   */
+  autoFocus?: boolean
+
+  /**
+   * Slot size variant
+   * @default 'default'
+   */
+  size?: 'sm' | 'default' | 'lg'
+
+  /**
+   * Error state
+   */
+  error?: boolean
+
+  /**
+   * Success state
+   */
+  success?: boolean
+}
+
+/**
+ * Return type for useSmartOTP hook
+ */
+export interface UseSmartOTPReturn {
+  value: string
+  handleChange: (newValue: string) => void
+  handleComplete: (completedValue: string) => void
+  isComplete: boolean
+  isValid: boolean
+  clear: () => void
+}

package/src/components/otp/use-otp-input.ts

@@ -0,0 +1,224 @@
+'use client'
+
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import type {
+  SmartOTPProps,
+  UseSmartOTPReturn,
+  OTPValidationMode,
+  OTPPasteBehavior,
+  OTPValidator,
+} from './types'
+
+/**
+ * Validation patterns for different modes
+ */
+const VALIDATION_PATTERNS: Record<Exclude<OTPValidationMode, 'custom'>, RegExp> = {
+  numeric: /^\d+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/,
+  alpha: /^[a-zA-Z]+$/,
+}
+
+/**
+ * Clean input based on validation mode
+ */
+function cleanInput(
+  input: string,
+  validationMode: OTPValidationMode,
+  customValidator?: OTPValidator
+): string {
+  if (!input) return ''
+
+  // Remove all whitespace and convert to uppercase for consistency
+  let cleaned = input.replace(/\s+/g, '').trim()
+
+  if (validationMode === 'custom' && customValidator) {
+    // For custom validation, filter character by character
+    return cleaned
+      .split('')
+      .filter((char) => customValidator(char))
+      .join('')
+  }
+
+  // For built-in modes, use regex patterns
+  const pattern = VALIDATION_PATTERNS[validationMode as keyof typeof VALIDATION_PATTERNS]
+  if (!pattern) return cleaned
+
+  return cleaned
+    .split('')
+    .filter((char) => pattern.test(char))
+    .join('')
+}
+
+/**
+ * Validate entire value
+ */
+function validateValue(
+  value: string,
+  validationMode: OTPValidationMode,
+  customValidator?: OTPValidator
+): boolean {
+  if (!value) return true // Empty is valid
+
+  if (validationMode === 'custom' && customValidator) {
+    return customValidator(value)
+  }
+
+  const pattern = VALIDATION_PATTERNS[validationMode as keyof typeof VALIDATION_PATTERNS]
+  return pattern ? pattern.test(value) : true
+}
+
+/**
+ * Process pasted content based on paste behavior
+ */
+function processPaste(
+  pastedText: string,
+  validationMode: OTPValidationMode,
+  pasteBehavior: OTPPasteBehavior,
+  length: number,
+  customValidator?: OTPValidator
+): string | null {
+  const cleaned = cleanInput(pastedText, validationMode, customValidator)
+
+  switch (pasteBehavior) {
+    case 'strict':
+      // Only accept if the cleaned version matches the original (no invalid chars)
+      if (cleaned.length !== pastedText.replace(/\s+/g, '').length) {
+        return null // Reject paste
+      }
+      return cleaned.slice(0, length)
+
+    case 'lenient':
+      // Accept and use only valid characters
+      return cleaned.slice(0, length)
+
+    case 'clean':
+    default:
+      // Clean and use valid characters
+      return cleaned.slice(0, length)
+  }
+}
+
+/**
+ * Smart OTP Input Hook
+ * Handles validation, paste behavior, and state management
+ */
+export function useSmartOTP({
+  length = 6,
+  value: controlledValue,
+  onChange,
+  onComplete,
+  validationMode = 'numeric',
+  customValidator,
+  autoSubmit = false,
+}: Pick<
+  SmartOTPProps,
+  | 'length'
+  | 'value'
+  | 'onChange'
+  | 'onComplete'
+  | 'validationMode'
+  | 'customValidator'
+  | 'autoSubmit'
+>): UseSmartOTPReturn {
+  const [internalValue, setInternalValue] = useState('')
+
+  // Use controlled value if provided, otherwise use internal state
+  const value = controlledValue !== undefined ? controlledValue : internalValue
+
+  const isComplete = useMemo(() => value.length === length, [value, length])
+
+  const isValid = useMemo(
+    () => validateValue(value, validationMode, customValidator),
+    [value, validationMode, customValidator]
+  )
+
+  /**
+   * Handle value change with validation
+   */
+  const handleChange = useCallback(
+    (newValue: string) => {
+      // Clean the input
+      const cleaned = cleanInput(newValue, validationMode, customValidator)
+
+      // Limit to max length
+      const limited = cleaned.slice(0, length)
+
+      // Update state
+      if (controlledValue === undefined) {
+        setInternalValue(limited)
+      }
+
+      // Call onChange callback
+      onChange?.(limited)
+    },
+    [validationMode, customValidator, length, onChange, controlledValue]
+  )
+
+  /**
+   * Handle completion
+   */
+  const handleComplete = useCallback(
+    (completedValue: string) => {
+      if (completedValue.length === length && isValid) {
+        onComplete?.(completedValue)
+      }
+    },
+    [length, isValid, onComplete]
+  )
+
+  /**
+   * Clear value
+   */
+  const clear = useCallback(() => {
+    if (controlledValue === undefined) {
+      setInternalValue('')
+    }
+    onChange?.('')
+  }, [onChange, controlledValue])
+
+  /**
+   * Auto-submit when complete
+   */
+  useEffect(() => {
+    if (autoSubmit && isComplete && isValid) {
+      handleComplete(value)
+    }
+  }, [autoSubmit, isComplete, isValid, value, handleComplete])
+
+  return {
+    value,
+    handleChange,
+    handleComplete,
+    isComplete,
+    isValid,
+    clear,
+  }
+}
+
+/**
+ * Create a paste handler for OTP input
+ */
+export function createPasteHandler(
+  length: number,
+  validationMode: OTPValidationMode,
+  pasteBehavior: OTPPasteBehavior,
+  onChange: (value: string) => void,
+  customValidator?: OTPValidator
+) {
+  return (e: React.ClipboardEvent) => {
+    e.preventDefault()
+    const pastedText = e.clipboardData.getData('text')
+
+    const processed = processPaste(
+      pastedText,
+      validationMode,
+      pasteBehavior,
+      length,
+      customValidator
+    )
+
+    if (processed !== null) {
+      onChange(processed)
+    }
+  }
+}