@quarklab/rad-ui 0.3.0 → 0.3.1

package/dist/index.js

@@ -141,9 +141,7 @@ async function readConfig(cwd) {
   const configPath = getConfigPath(cwd);
   const exists = await fs2.pathExists(configPath);
   if (!exists) {
-    throw new Error(
-      `Configuration file not found. Run \`rad-ui init\` first.`
-    );
+    throw new Error(`Configuration file not found. Run \`rad-ui init\` first.`);
   }
   return fs2.readJson(configPath);
 }
@@ -415,7 +413,9 @@ function generateV4CSS(theme) {
     if (key === "--radius") return `  ${key}: ${value};`;
     return `  ${key}: hsl(${value});`;
   }).join("\n");
-  const themeColorMappings = COLOR_VARS.map((name) => `  --color-${name}: var(--${name});`).join("\n");
+  const themeColorMappings = COLOR_VARS.map(
+    (name) => `  --color-${name}: var(--${name});`
+  ).join("\n");
   return `@import "tailwindcss";
 
 :root {
@@ -709,9 +709,7 @@ module.exports = {
     s.stop("Dependencies installed.");
   } catch {
     s.stop("Could not auto-install dependencies.");
-    p.log.warn(
-      `Please manually install: ${chalk2.cyan(baseDeps.join(" "))}`
-    );
+    p.log.warn(`Please manually install: ${chalk2.cyan(baseDeps.join(" "))}`);
   }
   logger.break();
   p.note(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A CLI for adding Rad UI components to your project. Beautiful Persian-themed React components built on Radix UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",

package/templates/web/input/input.tsx

@@ -0,0 +1,454 @@
+"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

@@ -0,0 +1,202 @@
+// ---------------------------------------------------------------------------
+// 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 };
+}

package/templates/web/input.tsx

@@ -1,103 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Upload } from "lucide-react";
-import { cn } from "../lib/utils";
-
-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",
-    },
-  }
-);
-
-export interface InputProps
-  extends
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
-    VariantProps<typeof inputVariants> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, size, type, ...props }, ref) => {
-    // Custom logic for file input to support Farsi text
-    if (type === "file") {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const [fileName, setFileName] = React.useState<string>("");
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const inputRef = React.useRef<HTMLInputElement>(null);
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useImperativeHandle(ref, () => inputRef.current!);
-
-      const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (file) {
-          setFileName(file.name);
-        } else {
-          setFileName("");
-        }
-        props.onChange?.(e);
-      };
-
-      return (
-        <div
-          className={cn(
-            inputVariants({ size, className }),
-            "flex items-center gap-2 cursor-pointer",
-            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}
-            onChange={handleFileChange}
-            {...props}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <input
-        type={type}
-        className={cn(inputVariants({ size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = "Input";
-
-export { Input, inputVariants };