@quarklab/rad-ui 0.3.1 → 0.3.2

package/templates/web/input/input.tsx

@@ -1,454 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Upload } from "lucide-react";
-import { cn } from "../../lib/utils";
-import {
-  validateValue,
-  validateFile,
-  characterPresets,
-  isControlKey,
-  formatFileSize,
-  type ValidationResult,
-} from "./validation";
-
-// ---------------------------------------------------------------------------
-// Variants
-// ---------------------------------------------------------------------------
-
-const inputVariants = cva(
-  "flex w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      size: {
-        sm: "h-9 px-3 text-sm",
-        md: "h-10 px-3 py-2 text-sm",
-        lg: "h-11 px-4 text-base",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-);
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface InputProps
-  extends
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
-    VariantProps<typeof inputVariants> {
-  // --- Validation ---
-  /** Enable built-in validation based on `type` (email / tel / number) */
-  validate?: boolean;
-  /** Custom regex pattern for validation (overrides type-based pattern) */
-  validationPattern?: RegExp;
-  /** Custom error message (overrides default Farsi message) */
-  validationMessage?: string;
-  /** Callback fired when validation state changes */
-  onValidationChange?: (result: { isValid: boolean; message?: string }) => void;
-
-  // --- Keyboard Restriction ---
-  /** Restrict which characters can be typed */
-  allowedCharacters?: RegExp | "digits" | "alpha" | "alphanumeric" | "persian";
-  /** Enhanced max length with character count feedback */
-  maxInputLength?: number;
-
-  // --- File Validation (type="file") ---
-  /** Maximum file size in bytes */
-  maxFileSize?: number;
-  /** Accepted file extensions, e.g. [".pdf", ".png"] */
-  acceptFormats?: string[];
-
-  // --- Error Display ---
-  /** Show inline error message below the input (default: false) */
-  showError?: boolean;
-}
-
-// ---------------------------------------------------------------------------
-// Input Component
-// ---------------------------------------------------------------------------
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      size,
-      type,
-      validate: shouldValidate,
-      validationPattern,
-      validationMessage,
-      onValidationChange,
-      allowedCharacters,
-      maxInputLength,
-      maxFileSize,
-      acceptFormats,
-      showError = false,
-      ...props
-    },
-    ref
-  ) => {
-    // ---- File Input ----
-    if (type === "file") {
-      return (
-        <FileInput
-          className={className}
-          size={size}
-          maxFileSize={maxFileSize}
-          acceptFormats={acceptFormats}
-          showError={showError}
-          onValidationChange={onValidationChange}
-          validationMessage={validationMessage}
-          ref={ref}
-          {...props}
-        />
-      );
-    }
-
-    // ---- Standard Input ----
-    return (
-      <StandardInput
-        className={className}
-        size={size}
-        type={type}
-        shouldValidate={shouldValidate}
-        validationPattern={validationPattern}
-        validationMessage={validationMessage}
-        onValidationChange={onValidationChange}
-        allowedCharacters={allowedCharacters}
-        maxInputLength={maxInputLength}
-        showError={showError}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = "Input";
-
-// ---------------------------------------------------------------------------
-// StandardInput (internal)
-// ---------------------------------------------------------------------------
-
-interface StandardInputInternalProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> {
-  size?: InputProps["size"];
-  shouldValidate?: boolean;
-  validationPattern?: RegExp;
-  validationMessage?: string;
-  onValidationChange?: InputProps["onValidationChange"];
-  allowedCharacters?: InputProps["allowedCharacters"];
-  maxInputLength?: number;
-  showError?: boolean;
-}
-
-const StandardInput = React.forwardRef<
-  HTMLInputElement,
-  StandardInputInternalProps
->(
-  (
-    {
-      className,
-      size,
-      type,
-      shouldValidate,
-      validationPattern,
-      validationMessage,
-      onValidationChange,
-      allowedCharacters,
-      maxInputLength,
-      showError = false,
-      onBlur,
-      onKeyDown,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
-    const [error, setError] = React.useState<string | null>(null);
-    const [charCount, setCharCount] = React.useState(0);
-
-    // ---- Validation on blur ----
-    const handleBlur = React.useCallback(
-      (e: React.FocusEvent<HTMLInputElement>) => {
-        if (shouldValidate || validationPattern) {
-          const result = validateValue(e.target.value, {
-            type,
-            required: props.required,
-            pattern: validationPattern,
-            customMessage: validationMessage,
-          });
-          setError(result.isValid ? null : (result.message ?? null));
-          onValidationChange?.(result);
-        }
-        onBlur?.(e);
-      },
-      [
-        shouldValidate,
-        validationPattern,
-        validationMessage,
-        type,
-        props.required,
-        onValidationChange,
-        onBlur,
-      ]
-    );
-
-    // ---- Keyboard filtering ----
-    const handleKeyDown = React.useCallback(
-      (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (allowedCharacters && !isControlKey(e)) {
-          const charPattern =
-            typeof allowedCharacters === "string"
-              ? characterPresets[allowedCharacters]
-              : allowedCharacters;
-
-          if (charPattern && !charPattern.test(e.key)) {
-            e.preventDefault();
-          }
-        }
-        onKeyDown?.(e);
-      },
-      [allowedCharacters, onKeyDown]
-    );
-
-    // ---- Change handler (char count + re-validate if already errored) ----
-    const handleChange = React.useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (maxInputLength !== undefined) {
-          setCharCount(e.target.value.length);
-        }
-
-        // Clear error on valid input after previous error
-        if (error && (shouldValidate || validationPattern)) {
-          const result = validateValue(e.target.value, {
-            type,
-            required: props.required,
-            pattern: validationPattern,
-            customMessage: validationMessage,
-          });
-          if (result.isValid) {
-            setError(null);
-            onValidationChange?.(result);
-          }
-        }
-
-        onChange?.(e);
-      },
-      [
-        maxInputLength,
-        error,
-        shouldValidate,
-        validationPattern,
-        validationMessage,
-        type,
-        props.required,
-        onValidationChange,
-        onChange,
-      ]
-    );
-
-    const hasError = error !== null;
-
-    return (
-      <div className="w-full">
-        <input
-          type={type}
-          className={cn(
-            inputVariants({ size, className }),
-            hasError && "border-destructive focus-visible:ring-destructive"
-          )}
-          ref={ref}
-          maxLength={maxInputLength}
-          aria-invalid={hasError || undefined}
-          onBlur={handleBlur}
-          onKeyDown={handleKeyDown}
-          onChange={handleChange}
-          {...props}
-        />
-        {/* Character count */}
-        {maxInputLength !== undefined && (
-          <div className="flex justify-end mt-1">
-            <span
-              className={cn(
-                "text-xs text-muted-foreground",
-                charCount >= maxInputLength && "text-destructive"
-              )}
-            >
-              {charCount}/{maxInputLength}
-            </span>
-          </div>
-        )}
-        {/* Inline error */}
-        {showError && hasError && (
-          <p className="text-sm text-destructive mt-1" role="alert">
-            {error}
-          </p>
-        )}
-      </div>
-    );
-  }
-);
-StandardInput.displayName = "StandardInput";
-
-// ---------------------------------------------------------------------------
-// FileInput (internal)
-// ---------------------------------------------------------------------------
-
-interface FileInputInternalProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "size" | "type"
-> {
-  size?: InputProps["size"];
-  maxFileSize?: number;
-  acceptFormats?: string[];
-  showError?: boolean;
-  onValidationChange?: InputProps["onValidationChange"];
-  validationMessage?: string;
-}
-
-const FileInput = React.forwardRef<HTMLInputElement, FileInputInternalProps>(
-  (
-    {
-      className,
-      size,
-      maxFileSize,
-      acceptFormats,
-      showError = false,
-      onValidationChange,
-      validationMessage,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
-    const [fileName, setFileName] = React.useState<string>("");
-    const [error, setError] = React.useState<string | null>(null);
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    React.useImperativeHandle(ref, () => inputRef.current!);
-
-    const handleFileChange = React.useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-
-        if (file) {
-          // Validate file
-          if (maxFileSize || acceptFormats) {
-            const result = validateFile(file, { maxFileSize, acceptFormats });
-            if (!result.isValid) {
-              const msg = validationMessage || result.message || null;
-              setError(msg);
-              setFileName("");
-              onValidationChange?.({
-                isValid: false,
-                message: msg ?? undefined,
-              });
-              // Reset the input so the same file can be re-selected
-              e.target.value = "";
-              return;
-            }
-          }
-
-          setFileName(file.name);
-          setError(null);
-          onValidationChange?.({ isValid: true });
-        } else {
-          setFileName("");
-          setError(null);
-        }
-
-        onChange?.(e);
-      },
-      [
-        maxFileSize,
-        acceptFormats,
-        validationMessage,
-        onValidationChange,
-        onChange,
-      ]
-    );
-
-    const hasError = error !== null;
-
-    // Build accept string from acceptFormats
-    const acceptAttr =
-      props.accept || (acceptFormats ? acceptFormats.join(",") : undefined);
-
-    return (
-      <div className="w-full">
-        <div
-          className={cn(
-            inputVariants({ size, className }),
-            "flex items-center gap-2 cursor-pointer",
-            hasError && "border-destructive focus-visible:ring-destructive",
-            props.disabled && "cursor-not-allowed opacity-50"
-          )}
-          onClick={() => !props.disabled && inputRef.current?.click()}
-        >
-          <button
-            type="button"
-            disabled={props.disabled}
-            className={cn(
-              "flex items-center gap-2 rounded-sm bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground transition-colors",
-              "hover:bg-secondary/80 focus:outline-none",
-              props.disabled && "pointer-events-none"
-            )}
-            tabIndex={-1}
-          >
-            <Upload className="h-3 w-3" />
-            <span>انتخاب فایل</span>
-          </button>
-          <span
-            className={cn(
-              "text-muted-foreground truncate flex-1 text-right text-xs",
-              !fileName && "opacity-70"
-            )}
-            dir="rtl"
-          >
-            {fileName || props.placeholder || "فایلی انتخاب نشده"}
-          </span>
-          <input
-            type="file"
-            className="hidden"
-            ref={inputRef}
-            accept={acceptAttr}
-            onChange={handleFileChange}
-            {...props}
-          />
-        </div>
-        {/* File constraints hint */}
-        {(maxFileSize || acceptFormats) && !hasError && (
-          <p className="text-xs text-muted-foreground mt-1" dir="rtl">
-            {[
-              maxFileSize ? `حداکثر حجم: ${formatFileSize(maxFileSize)}` : null,
-              acceptFormats
-                ? `فرمت‌های مجاز: ${acceptFormats.join("، ")}`
-                : null,
-            ]
-              .filter(Boolean)
-              .join(" · ")}
-          </p>
-        )}
-        {/* Inline error */}
-        {showError && hasError && (
-          <p className="text-sm text-destructive mt-1" role="alert" dir="rtl">
-            {error}
-          </p>
-        )}
-      </div>
-    );
-  }
-);
-FileInput.displayName = "FileInput";
-
-// ---------------------------------------------------------------------------
-// Exports
-// ---------------------------------------------------------------------------
-
-export { Input, inputVariants };

package/templates/web/input/validation.ts

@@ -1,202 +0,0 @@
-// ---------------------------------------------------------------------------
-// Validation Patterns
-// ---------------------------------------------------------------------------
-
-export const validationPatterns = {
-  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-  tel: /^\+?[0-9\s\-()]{7,15}$/,
-  iranianTel: /^(\+98|0)?9\d{9}$/,
-  number: /^-?\d*\.?\d+$/,
-} as const;
-
-// ---------------------------------------------------------------------------
-// Character Presets (for keyboard filtering)
-// ---------------------------------------------------------------------------
-
-export const characterPresets: Record<string, RegExp> = {
-  digits: /^[0-9]$/,
-  alpha: /^[a-zA-Z\u0600-\u06FF\s]$/,
-  alphanumeric: /^[a-zA-Z0-9\u0600-\u06FF\s]$/,
-  persian: /^[\u0600-\u06FF\u200C\u200F0-9\s.,;:!?()«»؟،؛]$/,
-};
-
-// ---------------------------------------------------------------------------
-// Control Keys (should never be blocked by character filtering)
-// ---------------------------------------------------------------------------
-
-const CONTROL_KEYS = new Set([
-  "Backspace",
-  "Delete",
-  "Tab",
-  "Escape",
-  "Enter",
-  "ArrowLeft",
-  "ArrowRight",
-  "ArrowUp",
-  "ArrowDown",
-  "Home",
-  "End",
-]);
-
-export function isControlKey(e: React.KeyboardEvent): boolean {
-  return CONTROL_KEYS.has(e.key) || e.ctrlKey || e.metaKey || e.altKey;
-}
-
-// ---------------------------------------------------------------------------
-// Default Farsi Error Messages
-// ---------------------------------------------------------------------------
-
-export const defaultMessages = {
-  email: "لطفاً یک آدرس ایمیل معتبر وارد کنید.",
-  tel: "لطفاً یک شماره تلفن معتبر وارد کنید.",
-  number: "لطفاً یک عدد معتبر وارد کنید.",
-  required: "این فیلد الزامی است.",
-  patternMismatch: "مقدار وارد شده معتبر نیست.",
-  fileTooLarge: (max: string) => `حجم فایل نباید بیشتر از ${max} باشد.`,
-  invalidFormat: (formats: string) => `فرمت‌های مجاز: ${formats}`,
-  minLength: (min: number) => `حداقل ${min} کاراکتر وارد کنید.`,
-  maxLength: (max: number) => `حداکثر ${max} کاراکتر مجاز است.`,
-} as const;
-
-// ---------------------------------------------------------------------------
-// File Size Formatter (bytes → readable Farsi string)
-// ---------------------------------------------------------------------------
-
-export function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} بایت`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} کیلوبایت`;
-  if (bytes < 1024 * 1024 * 1024)
-    return `${(bytes / (1024 * 1024)).toFixed(1)} مگابایت`;
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} گیگابایت`;
-}
-
-// ---------------------------------------------------------------------------
-// validateValue – Pure validation function
-// ---------------------------------------------------------------------------
-
-export interface ValidateValueOptions {
-  type?: string;
-  required?: boolean;
-  pattern?: RegExp;
-  minLength?: number;
-  maxLength?: number;
-  customMessage?: string;
-}
-
-export interface ValidationResult {
-  isValid: boolean;
-  message?: string;
-}
-
-export function validateValue(
-  value: string,
-  options: ValidateValueOptions = {}
-): ValidationResult {
-  const { type, required, pattern, minLength, maxLength, customMessage } =
-    options;
-
-  // Required check
-  if (required && !value.trim()) {
-    return { isValid: false, message: defaultMessages.required };
-  }
-
-  // Skip further validation if empty and not required
-  if (!value.trim()) {
-    return { isValid: true };
-  }
-
-  // Min length
-  if (minLength !== undefined && value.length < minLength) {
-    return {
-      isValid: false,
-      message: defaultMessages.minLength(minLength),
-    };
-  }
-
-  // Max length
-  if (maxLength !== undefined && value.length > maxLength) {
-    return {
-      isValid: false,
-      message: defaultMessages.maxLength(maxLength),
-    };
-  }
-
-  // Custom pattern
-  if (pattern) {
-    if (!pattern.test(value)) {
-      return {
-        isValid: false,
-        message: customMessage || defaultMessages.patternMismatch,
-      };
-    }
-    return { isValid: true };
-  }
-
-  // Type-based validation
-  switch (type) {
-    case "email":
-      if (!validationPatterns.email.test(value)) {
-        return {
-          isValid: false,
-          message: customMessage || defaultMessages.email,
-        };
-      }
-      break;
-    case "tel":
-      if (!validationPatterns.tel.test(value)) {
-        return {
-          isValid: false,
-          message: customMessage || defaultMessages.tel,
-        };
-      }
-      break;
-    case "number":
-      if (!validationPatterns.number.test(value)) {
-        return {
-          isValid: false,
-          message: customMessage || defaultMessages.number,
-        };
-      }
-      break;
-  }
-
-  return { isValid: true };
-}
-
-// ---------------------------------------------------------------------------
-// File Validation
-// ---------------------------------------------------------------------------
-
-export interface FileValidationOptions {
-  maxFileSize?: number;
-  acceptFormats?: string[];
-}
-
-export function validateFile(
-  file: File,
-  options: FileValidationOptions
-): ValidationResult {
-  const { maxFileSize, acceptFormats } = options;
-
-  if (maxFileSize && file.size > maxFileSize) {
-    return {
-      isValid: false,
-      message: defaultMessages.fileTooLarge(formatFileSize(maxFileSize)),
-    };
-  }
-
-  if (acceptFormats && acceptFormats.length > 0) {
-    const fileName = file.name.toLowerCase();
-    const hasValidFormat = acceptFormats.some((format) =>
-      fileName.endsWith(format.toLowerCase())
-    );
-    if (!hasValidFormat) {
-      return {
-        isValid: false,
-        message: defaultMessages.invalidFormat(acceptFormats.join("، ")),
-      };
-    }
-  }
-
-  return { isValid: true };
-}