@quarklab/rad-ui 0.2.0 → 0.3.1

package/dist/index.js

@@ -7,7 +7,7 @@ import { Command } from "commander";
 import path3 from "path";
 import fs3 from "fs-extra";
 import * as p from "@clack/prompts";
-import chalk3 from "chalk";
+import chalk2 from "chalk";
 
 // src/utils/detect-project.ts
 import path from "path";
@@ -34,6 +34,76 @@ async function detectPackageManager(cwd) {
   if (await fs.pathExists(path.resolve(cwd, "yarn.lock"))) return "yarn";
   return "npm";
 }
+async function detectTailwindVersion(cwd, cssPath) {
+  const pkgPath = path.resolve(cwd, "package.json");
+  if (await fs.pathExists(pkgPath)) {
+    try {
+      const pkg = await fs.readJson(pkgPath);
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      const twVersion = allDeps["tailwindcss"];
+      if (twVersion) {
+        const cleanVersion = twVersion.replace(/^[\^~>=<]+/, "");
+        if (cleanVersion.startsWith("4")) return "v4";
+        if (cleanVersion.startsWith("3")) return "v3";
+      }
+    } catch {
+    }
+  }
+  if (cssPath) {
+    const fullCssPath = path.resolve(cwd, cssPath);
+    if (await fs.pathExists(fullCssPath)) {
+      try {
+        const cssContent = await fs.readFile(fullCssPath, "utf-8");
+        if (cssContent.includes('@import "tailwindcss"') || cssContent.includes("@import 'tailwindcss'")) {
+          return "v4";
+        }
+        if (cssContent.includes("@tailwind base")) {
+          return "v3";
+        }
+      } catch {
+      }
+    }
+  }
+  const configFiles = [
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.cjs",
+    "tailwind.config.mjs"
+  ];
+  for (const file of configFiles) {
+    if (await fs.pathExists(path.resolve(cwd, file))) {
+      return "v3";
+    }
+  }
+  return "v4";
+}
+async function detectSrcDir(cwd) {
+  const tsconfigPath = path.resolve(cwd, "tsconfig.json");
+  if (await fs.pathExists(tsconfigPath)) {
+    try {
+      const raw = await fs.readFile(tsconfigPath, "utf-8");
+      const cleaned = raw.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+      const tsconfig = JSON.parse(cleaned);
+      const paths = tsconfig?.compilerOptions?.paths;
+      if (paths) {
+        const aliasKey = Object.keys(paths).find(
+          (k) => k === "@/*" || k === "~/*"
+        );
+        if (aliasKey) {
+          const aliasTargets = paths[aliasKey];
+          if (Array.isArray(aliasTargets) && aliasTargets.length > 0) {
+            const target = aliasTargets[0].replace(/^\.\//, "").replace(/\/\*$/, "");
+            if (target) return target;
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  if (await fs.pathExists(path.resolve(cwd, "src"))) return "src";
+  if (await fs.pathExists(path.resolve(cwd, "app"))) return "app";
+  return "src";
+}
 function getDefaultCssPath(projectType) {
   switch (projectType) {
     case "nextjs":
@@ -71,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 ${chalk("rad-ui init")} first.`
-    );
+    throw new Error(`Configuration file not found. Run \`rad-ui init\` first.`);
   }
   return fs2.readJson(configPath);
 }
@@ -81,19 +149,19 @@ async function writeConfig(cwd, config) {
   const configPath = getConfigPath(cwd);
   await fs2.writeJson(configPath, config, { spaces: 2 });
 }
-function chalk(text2) {
-  return `\`${text2}\``;
+function resolveAlias(alias, srcDir) {
+  return alias.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/");
 }
 function resolveComponentsDir(cwd, config) {
-  const aliasPath = config.aliases.components.replace(/^@\//, "src/");
-  return path2.resolve(cwd, aliasPath);
+  const relPath = resolveAlias(config.aliases.components, config.srcDir);
+  return path2.resolve(cwd, relPath);
 }
 
 // src/registry/themes.ts
 var themes = [
   {
     name: "kahgel",
-    label: "Kahgel (\u06A9\u0627\u0647\u06AF\u0644) \u2014 Warm Clay",
+    label: "Kahgel \u2014 Warm Clay",
     cssVars: {
       light: {
         "--background": "40 20% 98%",
@@ -132,7 +200,7 @@ var themes = [
   },
   {
     name: "firouzeh",
-    label: "Firouzeh (\u0641\u06CC\u0631\u0648\u0632\u0647) \u2014 Persian Turquoise",
+    label: "Firouzeh \u2014 Persian Turquoise",
     cssVars: {
       light: {
         "--background": "180 20% 98%",
@@ -171,7 +239,7 @@ var themes = [
   },
   {
     name: "lajvard",
-    label: "Lajvard (\u0644\u0627\u062C\u0648\u0631\u062F) \u2014 Lapis Lazuli",
+    label: "Lajvard \u2014 Lapis Lazuli",
     cssVars: {
       light: {
         "--background": "225 25% 98%",
@@ -210,7 +278,7 @@ var themes = [
   },
   {
     name: "puste",
-    label: "Puste (\u067E\u0633\u062A\u0647) \u2014 Pistachio",
+    label: "Puste \u2014 Pistachio",
     cssVars: {
       light: {
         "--background": "80 20% 98%",
@@ -249,7 +317,7 @@ var themes = [
   },
   {
     name: "anar",
-    label: "Anar (\u0627\u0646\u0627\u0631) \u2014 Pomegranate",
+    label: "Anar \u2014 Pomegranate",
     cssVars: {
       light: {
         "--background": "0 20% 98%",
@@ -287,7 +355,29 @@ var themes = [
     }
   }
 ];
-function generateThemeCSS(theme) {
+var COLOR_VARS = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "destructive",
+  "destructive-foreground",
+  "card",
+  "card-foreground",
+  "border",
+  "muted",
+  "muted-foreground",
+  "ring"
+];
+function generateThemeCSS(theme, tailwindVersion = "v3") {
+  if (tailwindVersion === "v4") {
+    return generateV4CSS(theme);
+  }
+  return generateV3CSS(theme);
+}
+function generateV3CSS(theme) {
   const lightVars = Object.entries(theme.cssVars.light).map(([key, value]) => `    ${key}: ${value};`).join("\n");
   const darkVars = Object.entries(theme.cssVars.dark).map(([key, value]) => `    ${key}: ${value};`).join("\n");
   return `@tailwind base;
@@ -314,21 +404,51 @@ ${darkVars}
 }
 `;
 }
+function generateV4CSS(theme) {
+  const lightVars = Object.entries(theme.cssVars.light).map(([key, value]) => {
+    if (key === "--radius") return `  ${key}: ${value};`;
+    return `  ${key}: hsl(${value});`;
+  }).join("\n");
+  const darkVars = Object.entries(theme.cssVars.dark).map(([key, value]) => {
+    if (key === "--radius") return `  ${key}: ${value};`;
+    return `  ${key}: hsl(${value});`;
+  }).join("\n");
+  const themeColorMappings = COLOR_VARS.map(
+    (name) => `  --color-${name}: var(--${name});`
+  ).join("\n");
+  return `@import "tailwindcss";
+
+:root {
+${lightVars}
+}
+
+.dark {
+${darkVars}
+}
+
+@theme inline {
+${themeColorMappings}
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+`;
+}
 
 // src/utils/logger.ts
-import chalk2 from "chalk";
+import chalk from "chalk";
 var logger = {
-  info: (msg) => console.log(chalk2.cyan("\u2139"), msg),
-  success: (msg) => console.log(chalk2.green("\u2713"), msg),
-  warn: (msg) => console.log(chalk2.yellow("\u26A0"), msg),
-  error: (msg) => console.log(chalk2.red("\u2717"), msg),
+  info: (msg) => console.log(chalk.cyan("\u2139"), msg),
+  success: (msg) => console.log(chalk.green("\u2713"), msg),
+  warn: (msg) => console.log(chalk.yellow("\u26A0"), msg),
+  error: (msg) => console.log(chalk.red("\u2717"), msg),
   break: () => console.log("")
 };
 
 // src/commands/init.ts
 async function initCommand(opts) {
   const cwd = process.cwd();
-  p.intro(chalk3.bold("Welcome to Rad UI"));
+  p.intro(chalk2.bold("Welcome to Rad UI"));
   if (await configExists(cwd)) {
     const shouldContinue = await p.confirm({
       message: "Rad UI is already initialized in this project. Reinitialize?",
@@ -341,53 +461,52 @@ async function initCommand(opts) {
   }
   const projectType = await detectProjectType(cwd);
   const packageManager = await detectPackageManager(cwd);
+  const detectedSrcDir = await detectSrcDir(cwd);
+  const defaultCssPath = getDefaultCssPath(projectType);
+  const tailwindVersion = await detectTailwindVersion(cwd, defaultCssPath);
   if (projectType !== "unknown") {
-    p.log.info(`Detected project: ${chalk3.cyan(projectType)}`);
+    p.log.info(`Detected project: ${chalk2.cyan(projectType)}`);
   }
-  p.log.info(`Package manager: ${chalk3.cyan(packageManager)}`);
+  p.log.info(`Package manager: ${chalk2.cyan(packageManager)}`);
+  p.log.info(`Tailwind CSS: ${chalk2.cyan(tailwindVersion)}`);
+  p.log.info(`Source directory: ${chalk2.cyan(detectedSrcDir + "/")}`);
   const responses = await p.group(
     {
-      platform: () => p.select({
-        message: "Which platform are you building for?",
-        options: [
-          { value: "web", label: "Web", hint: "React + Tailwind CSS" },
-          {
-            value: "mobile",
-            label: "Mobile",
-            hint: "React Native + NativeWind (coming soon)"
-          },
-          { value: "both", label: "Both", hint: "Web + Mobile" }
-        ],
-        initialValue: "web"
-      }),
       theme: () => p.select({
-        message: "Choose a theme:",
+        message: "Choose a color theme for your project:",
         options: themes.map((t) => ({
           value: t.name,
           label: t.label
         })),
         initialValue: "kahgel"
       }),
+      srcDir: () => p.text({
+        message: `Base directory that @ resolves to:`,
+        placeholder: detectedSrcDir,
+        defaultValue: detectedSrcDir
+      }),
       componentsPath: () => p.text({
-        message: "Where would you like to store components?",
+        message: `Where to add UI components (e.g. ${detectedSrcDir}/components/ui):`,
         placeholder: "@/components/ui",
         defaultValue: "@/components/ui"
       }),
       utilsPath: () => p.text({
-        message: "Where is your utils file?",
+        message: `Where to create the cn() helper (e.g. ${detectedSrcDir}/lib/utils.ts):`,
         placeholder: "@/lib/utils",
         defaultValue: "@/lib/utils"
       }),
       cssPath: () => p.text({
-        message: "Where is your global CSS file?",
-        placeholder: getDefaultCssPath(projectType),
-        defaultValue: getDefaultCssPath(projectType)
+        message: `Path to your global CSS file:`,
+        placeholder: defaultCssPath,
+        defaultValue: defaultCssPath
       }),
-      tailwindConfig: () => p.text({
-        message: "Where is your Tailwind config file?",
-        placeholder: getDefaultTailwindConfig(projectType),
-        defaultValue: getDefaultTailwindConfig(projectType)
-      })
+      ...tailwindVersion === "v3" ? {
+        tailwindConfig: () => p.text({
+          message: `Path to your Tailwind config file:`,
+          placeholder: getDefaultTailwindConfig(projectType),
+          defaultValue: getDefaultTailwindConfig(projectType)
+        })
+      } : {}
     },
     {
       onCancel: () => {
@@ -396,15 +515,18 @@ async function initCommand(opts) {
       }
     }
   );
+  const srcDir = responses.srcDir || detectedSrcDir;
   const s = p.spinner();
   s.start("Creating configuration...");
   const config = {
     $schema: "https://www.quarklab.dev/schema.json",
     registry: "https://www.quarklab.dev/r",
-    platform: responses.platform,
+    tailwindVersion,
+    srcDir,
+    platform: "web",
     theme: responses.theme,
     tailwind: {
-      config: responses.tailwindConfig,
+      ...tailwindVersion === "v3" && responses.tailwindConfig ? { config: responses.tailwindConfig } : {},
       css: responses.cssPath
     },
     aliases: {
@@ -420,13 +542,13 @@ async function initCommand(opts) {
     const cssPath = path3.resolve(cwd, config.tailwind.css);
     const cssDir = path3.dirname(cssPath);
     await fs3.ensureDir(cssDir);
-    const cssContent = generateThemeCSS(selectedTheme);
+    const cssContent = generateThemeCSS(selectedTheme, tailwindVersion);
     await fs3.writeFile(cssPath, cssContent, "utf-8");
   }
   s.stop("Theme configured.");
   s.start("Setting up utilities...");
   const utilsAlias = config.aliases.utils;
-  const utilsRelPath = utilsAlias.replace(/^@\//, "src/") + ".ts";
+  const utilsRelPath = utilsAlias.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/") + ".ts";
   const utilsDestPath = path3.resolve(cwd, utilsRelPath);
   const utilsDir = path3.dirname(utilsDestPath);
   await fs3.ensureDir(utilsDir);
@@ -439,29 +561,30 @@ export function cn(...inputs: ClassValue[]) {
 `;
   await fs3.writeFile(utilsDestPath, utilsContent, "utf-8");
   s.stop("Utilities ready.");
-  s.start("Configuring Tailwind CSS...");
-  const tailwindConfigPath = path3.resolve(cwd, config.tailwind.config);
-  const componentsRelPath = config.aliases.components.replace(/^@\//, "src/");
-  if (await fs3.pathExists(tailwindConfigPath)) {
-    let tailwindContent = await fs3.readFile(tailwindConfigPath, "utf-8");
-    const contentPath = `./${componentsRelPath}/**/*.{ts,tsx}`;
-    if (!tailwindContent.includes(contentPath)) {
-      tailwindContent = tailwindContent.replace(
-        /(content\s*:\s*\[)/,
-        `$1
+  if (tailwindVersion === "v3" && config.tailwind.config) {
+    s.start("Configuring Tailwind CSS...");
+    const tailwindConfigPath = path3.resolve(cwd, config.tailwind.config);
+    const componentsRelPath = config.aliases.components.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/");
+    if (await fs3.pathExists(tailwindConfigPath)) {
+      let tailwindContent = await fs3.readFile(tailwindConfigPath, "utf-8");
+      const contentPath = `./${componentsRelPath}/**/*.{ts,tsx}`;
+      if (!tailwindContent.includes(contentPath)) {
+        tailwindContent = tailwindContent.replace(
+          /(content\s*:\s*\[)/,
+          `$1
     "${contentPath}",`
-      );
-      await fs3.writeFile(tailwindConfigPath, tailwindContent, "utf-8");
-      p.log.info(`Added component path to ${config.tailwind.config}`);
-    }
-  } else {
-    const isTS = config.tailwind.config.endsWith(".ts");
-    const newConfig = isTS ? `import type { Config } from "tailwindcss";
+        );
+        await fs3.writeFile(tailwindConfigPath, tailwindContent, "utf-8");
+        p.log.info(`Added component path to ${config.tailwind.config}`);
+      }
+    } else {
+      const isTS = config.tailwind.config.endsWith(".ts");
+      const newConfig = isTS ? `import type { Config } from "tailwindcss";
 
 const config: Config = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./${srcDir}/**/*.{js,ts,jsx,tsx,mdx}",
     "./${componentsRelPath}/**/*.{ts,tsx}",
   ],
   theme: {
@@ -516,7 +639,7 @@ export default config;
 module.exports = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./${srcDir}/**/*.{js,ts,jsx,tsx,mdx}",
     "./${componentsRelPath}/**/*.{ts,tsx}",
   ],
   theme: {
@@ -566,16 +689,17 @@ module.exports = {
   plugins: [],
 };
 `;
-    await fs3.writeFile(tailwindConfigPath, newConfig, "utf-8");
+      await fs3.writeFile(tailwindConfigPath, newConfig, "utf-8");
+    }
+    s.stop("Tailwind CSS configured.");
+  } else {
+    p.log.info(
+      `Tailwind v4 detected \u2014 theme variables added directly to ${chalk2.cyan(config.tailwind.css)}`
+    );
   }
-  s.stop("Tailwind CSS configured.");
   s.start("Installing base dependencies...");
-  const installCmd = getInstallCommand(packageManager, [
-    "tailwindcss",
-    "clsx",
-    "tailwind-merge",
-    "class-variance-authority"
-  ]);
+  const baseDeps = ["clsx", "tailwind-merge", "class-variance-authority"];
+  const installCmd = getInstallCommand(packageManager, baseDeps);
   try {
     const { execa } = await import("execa");
     await execa(installCmd.command, installCmd.args, {
@@ -585,21 +709,20 @@ module.exports = {
     s.stop("Dependencies installed.");
   } catch {
     s.stop("Could not auto-install dependencies.");
-    p.log.warn(
-      `Please manually install: ${chalk3.cyan("tailwindcss clsx tailwind-merge class-variance-authority")}`
-    );
+    p.log.warn(`Please manually install: ${chalk2.cyan(baseDeps.join(" "))}`);
   }
   logger.break();
   p.note(
     [
-      `${chalk3.green("Rad UI has been initialized!")}`,
+      `${chalk2.green("Rad UI has been initialized!")}`,
       "",
-      `Add components with: ${chalk3.cyan("npx @quarklab/rad-ui add <component>")}`,
-      `Add all components:  ${chalk3.cyan("npx @quarklab/rad-ui add --all")}`,
+      `Add components with: ${chalk2.cyan("npx @quarklab/rad-ui add <component>")}`,
+      `Add all components:  ${chalk2.cyan("npx @quarklab/rad-ui add --all")}`,
       "",
-      `Theme: ${chalk3.cyan(selectedTheme?.label || config.theme)}`,
-      `Components: ${chalk3.cyan(config.aliases.components)}`,
-      `Utils: ${chalk3.cyan(config.aliases.utils)}`
+      `Theme: ${chalk2.cyan(selectedTheme?.label || config.theme)}`,
+      `Tailwind: ${chalk2.cyan(tailwindVersion)}`,
+      `Components: ${chalk2.cyan(config.aliases.components)} \u2192 ${chalk2.dim(srcDir + "/" + config.aliases.components.replace(/^@\//, "").replace(/^~\//, ""))}`,
+      `Utils: ${chalk2.cyan(config.aliases.utils)} \u2192 ${chalk2.dim(srcDir + "/" + config.aliases.utils.replace(/^@\//, "").replace(/^~\//, "") + ".ts")}`
     ].join("\n"),
     "Next steps"
   );
@@ -623,7 +746,7 @@ import path4 from "path";
 import { fileURLToPath } from "url";
 import fs4 from "fs-extra";
 import * as p2 from "@clack/prompts";
-import chalk4 from "chalk";
+import chalk3 from "chalk";
 
 // src/registry/index.ts
 var components = [
@@ -956,10 +1079,10 @@ async function getComponentContent(name, config) {
 }
 async function addCommand(componentNames, opts) {
   const cwd = process.cwd();
-  p2.intro(chalk4.bold("Add Rad UI Components"));
+  p2.intro(chalk3.bold("Add Rad UI Components"));
   if (!await configExists(cwd)) {
     p2.log.error(
-      `Configuration not found. Run ${chalk4.cyan("npx @quarklab/rad-ui init")} first.`
+      `Configuration not found. Run ${chalk3.cyan("npx @quarklab/rad-ui init")} first.`
     );
     process.exit(1);
   }
@@ -987,10 +1110,10 @@ async function addCommand(componentNames, opts) {
     const invalid = componentNames.filter((n) => !availableNames.includes(n));
     if (invalid.length > 0) {
       p2.log.error(
-        `Unknown component(s): ${invalid.map((n) => chalk4.red(n)).join(", ")}`
+        `Unknown component(s): ${invalid.map((n) => chalk3.red(n)).join(", ")}`
       );
       p2.log.info(
-        `Available: ${availableNames.map((n) => chalk4.cyan(n)).join(", ")}`
+        `Available: ${availableNames.map((n) => chalk3.cyan(n)).join(", ")}`
       );
       process.exit(1);
     }
@@ -1015,7 +1138,7 @@ async function addCommand(componentNames, opts) {
   const extraDeps = allNames.filter((n) => !selectedNames.includes(n));
   if (extraDeps.length > 0) {
     p2.log.info(
-      `Also adding dependencies: ${extraDeps.map((n) => chalk4.cyan(n)).join(", ")}`
+      `Also adding dependencies: ${extraDeps.map((n) => chalk3.cyan(n)).join(", ")}`
     );
   }
   const componentsDir = opts.path ? path4.resolve(cwd, opts.path) : resolveComponentsDir(cwd, config);
@@ -1034,7 +1157,7 @@ async function addCommand(componentNames, opts) {
     }
     if (existing.length > 0) {
       const shouldOverwrite = await p2.confirm({
-        message: `The following components already exist: ${existing.map((n) => chalk4.yellow(n)).join(", ")}. Overwrite?`,
+        message: `The following components already exist: ${existing.map((n) => chalk3.yellow(n)).join(", ")}. Overwrite?`,
         initialValue: false
       });
       if (p2.isCancel(shouldOverwrite) || !shouldOverwrite) {
@@ -1098,19 +1221,19 @@ async function addCommand(componentNames, opts) {
       s.stop("Could not auto-install dependencies.");
       p2.log.warn(
         `Please manually install:
-${chalk4.cyan(depsToInstall.join(" "))}`
+${chalk3.cyan(depsToInstall.join(" "))}`
       );
     }
   }
   logger.break();
   p2.note(
     [
-      `Components added to ${chalk4.cyan(componentsDir.replace(cwd + "/", ""))}:`,
+      `Components added to ${chalk3.cyan(componentsDir.replace(cwd + "/", ""))}:`,
       "",
-      ...allNames.map((n) => `  ${chalk4.green("+")} ${n}`),
+      ...allNames.map((n) => `  ${chalk3.green("+")} ${n}`),
       "",
       "Import example:",
-      chalk4.gray(
+      chalk3.gray(
         `  import { Button } from "${config.aliases.components}/button";`
       )
     ].join("\n"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.2.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 };