@djangocfg/ui-nextjs 2.1.29 → 2.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.29",
+  "version": "2.1.31",
   "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.31",
+    "@djangocfg/ui-core": "^2.1.31",
     "@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.31",
     "@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)
+    }
+  }
+}

package/src/hooks/index.ts

@@ -26,3 +26,7 @@ export type { UseHotkeyOptions, HotkeyCallback, Keys } from './useHotkey';
 // Device detection
 export { useDeviceDetect } from './useDeviceDetect';
 export type { DeviceDetectResult } from './useDeviceDetect';
+
+// Browser detection (advanced - detects Chromium browsers correctly)
+export { useBrowserDetect } from './useBrowserDetect';
+export type { BrowserInfo } from './useBrowserDetect';

package/src/hooks/useBrowserDetect.ts

@@ -0,0 +1,182 @@
+/**
+ * Advanced browser detection hook
+ *
+ * Detects modern browsers including Chromium-based browsers that may
+ * incorrectly report as Safari (Arc, Brave, Vivaldi, Comet, etc.)
+ */
+
+'use client';
+
+import { useMemo } from 'react';
+
+export interface BrowserInfo {
+  // Core browser types
+  isChrome: boolean;
+  isChromium: boolean; // Any Chromium-based browser
+  isSafari: boolean; // Real Safari (WebKit on macOS/iOS)
+  isFirefox: boolean;
+  isEdge: boolean;
+  isOpera: boolean;
+
+  // Modern Chromium-based browsers
+  isBrave: boolean;
+  isArc: boolean;
+  isVivaldi: boolean;
+  isYandex: boolean;
+  isSamsungBrowser: boolean;
+  isUCBrowser: boolean;
+
+  // Browser name
+  browserName: string;
+
+  // Engine
+  isWebKit: boolean; // Safari's engine
+  isBlink: boolean; // Chromium's engine
+  isGecko: boolean; // Firefox's engine
+
+  // For debugging
+  userAgent: string;
+}
+
+/**
+ * Detect browser with improved accuracy for Chromium-based browsers
+ *
+ * @example
+ * ```tsx
+ * const browser = useBrowserDetect();
+ *
+ * if (browser.isSafari && !browser.isChromium) {
+ *   // Real Safari
+ * }
+ *
+ * if (browser.isChromium) {
+ *   // Any Chromium-based browser (Chrome, Edge, Brave, Arc, etc.)
+ * }
+ * ```
+ */
+export function useBrowserDetect(): BrowserInfo {
+  return useMemo(() => {
+    if (typeof window === 'undefined') {
+      return {
+        isChrome: false,
+        isChromium: false,
+        isSafari: false,
+        isFirefox: false,
+        isEdge: false,
+        isOpera: false,
+        isBrave: false,
+        isArc: false,
+        isVivaldi: false,
+        isYandex: false,
+        isSamsungBrowser: false,
+        isUCBrowser: false,
+        browserName: 'unknown',
+        isWebKit: false,
+        isBlink: false,
+        isGecko: false,
+        userAgent: '',
+      };
+    }
+
+    const ua = window.navigator.userAgent.toLowerCase();
+
+    // Check for specific browsers first (most specific to least specific)
+
+    // Edge (Chromium-based)
+    const isEdge = ua.includes('edg/') || ua.includes('edge/');
+
+    // Brave (check for Brave-specific API)
+    const isBrave = !!(window.navigator as any).brave;
+
+    // Arc (check for Arc-specific markers in UA)
+    const isArc = ua.includes('arc/');
+
+    // Vivaldi
+    const isVivaldi = ua.includes('vivaldi');
+
+    // Yandex Browser
+    const isYandex = ua.includes('yabrowser');
+
+    // Samsung Internet
+    const isSamsungBrowser = ua.includes('samsungbrowser');
+
+    // UC Browser
+    const isUCBrowser = ua.includes('ucbrowser') || ua.includes('uc browser');
+
+    // Opera (modern Chromium-based)
+    const isOpera = ua.includes('opr/') || ua.includes('opera');
+
+    // Chrome (not Edge, not other Chromium browsers)
+    const isChrome = ua.includes('chrome') &&
+                    !isEdge &&
+                    !isOpera &&
+                    !isYandex &&
+                    !isSamsungBrowser &&
+                    !isVivaldi &&
+                    !isArc &&
+                    !isBrave;
+
+    // Firefox
+    const isFirefox = ua.includes('firefox') && !ua.includes('seamonkey');
+
+    // Safari (real Safari, not Chromium pretending to be Safari)
+    // Safari will have 'safari' in UA but NOT 'chrome' or 'chromium'
+    // Real Safari uses WebKit engine
+    // Additional check: Safari has 'version/' in UA, Chromium browsers don't combine it with Safari
+    const hasSafariUA = ua.includes('safari');
+    const hasChrome = ua.includes('chrome') || ua.includes('crios');
+    const hasVersion = ua.includes('version/'); // Real Safari includes Version/XX.X
+    const isSafari = hasSafariUA && !hasChrome && hasVersion;
+
+    // Chromium detection (any browser using Chromium/Blink engine)
+    // If it has "chrome" in UA or is one of the known Chromium browsers
+    const isChromium = hasChrome ||
+                      isEdge ||
+                      isOpera ||
+                      isYandex ||
+                      isSamsungBrowser ||
+                      isVivaldi ||
+                      isArc ||
+                      isBrave ||
+                      isUCBrowser;
+
+    // Engine detection
+    const isWebKit = !isChromium && isSafari;
+    const isBlink = isChromium;
+    const isGecko = isFirefox;
+
+    // Determine browser name
+    let browserName = 'unknown';
+    if (isBrave) browserName = 'Brave';
+    else if (isArc) browserName = 'Arc';
+    else if (isVivaldi) browserName = 'Vivaldi';
+    else if (isYandex) browserName = 'Yandex';
+    else if (isSamsungBrowser) browserName = 'Samsung Internet';
+    else if (isUCBrowser) browserName = 'UC Browser';
+    else if (isEdge) browserName = 'Edge';
+    else if (isOpera) browserName = 'Opera';
+    else if (isChrome) browserName = 'Chrome';
+    else if (isSafari) browserName = 'Safari';
+    else if (isFirefox) browserName = 'Firefox';
+
+    return {
+      isChrome,
+      isChromium,
+      isSafari,
+      isFirefox,
+      isEdge,
+      isOpera,
+      isBrave,
+      isArc,
+      isVivaldi,
+      isYandex,
+      isSamsungBrowser,
+      isUCBrowser,
+      browserName,
+      isWebKit,
+      isBlink,
+      isGecko,
+      userAgent: window.navigator.userAgent,
+    };
+  }, []);
+}