@djangocfg/ui-core 2.1.90 → 2.1.91

package/src/components/navigation-menu.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../lib';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link> & {
+    href?: string
+  }
+>(({ href, children, ...props }, ref) => {
+  if (href) {
+    return (
+      <NavigationMenuPrimitive.Link asChild ref={ref} {...props}>
+        <a href={href}>{children}</a>
+      </NavigationMenuPrimitive.Link>
+    )
+  }
+
+  return (
+    <NavigationMenuPrimitive.Link ref={ref} {...props}>
+      {children}
+    </NavigationMenuPrimitive.Link>
+  )
+})
+NavigationMenuLink.displayName = "NavigationMenuLink"
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn("absolute top-full flex justify-center")}
+    style={{ left: 0, right: 0 }}
+  >
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] overflow-hidden rounded-md border backdrop-blur-xl bg-popover/80 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-10 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

package/src/components/otp/index.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { MinusIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../input-otp';
+import { cn } from '../../lib';
+
+import { createPasteHandler, useSmartOTP } 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,225 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } 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)
+    }
+  }
+}