@quarklab/rad-ui 0.3.1 → 0.3.3

package/dist/index.js

@@ -743,7 +743,6 @@ function getInstallCommand(pm, packages) {
 
 // src/commands/add.ts
 import path4 from "path";
-import { fileURLToPath } from "url";
 import fs4 from "fs-extra";
 import * as p2 from "@clack/prompts";
 import chalk3 from "chalk";
@@ -813,9 +812,9 @@ var components = [
   },
   {
     name: "input",
-    description: "A text input field with multiple variants",
+    description: "A text input field with validation, keyboard filtering, and file validation",
     platform: "web",
-    files: ["input.tsx"],
+    files: ["input/input.tsx", "input/validation.ts"],
     npmDependencies: {
       "class-variance-authority": "^0.7.1",
       "lucide-react": "^0.309.0"
@@ -1007,7 +1006,7 @@ function collectNpmDependencies(names) {
 function transformImports(source, config) {
   const utilsAlias = config.aliases.utils;
   let result = source.replace(
-    /from\s+["']\.\.\/lib\/utils["']/g,
+    /from\s+["'](?:\.\.\/)+lib\/utils["']/g,
     `from "${utilsAlias}"`
   );
   result = result.replace(
@@ -1036,46 +1035,19 @@ async function fetchRegistryIndex(registryUrl) {
 }
 
 // src/commands/add.ts
-var __filename = fileURLToPath(import.meta.url);
-var __dirname = path4.dirname(__filename);
-function getTemplatesDir() {
-  return path4.resolve(__dirname, "..", "templates");
-}
-async function readBundledTemplate(name, platform) {
-  const comp = getComponent(name);
-  if (!comp) return null;
-  const platformDir = platform === "mobile" ? "mobile" : "web";
-  const templatesDir = getTemplatesDir();
-  const sourceDir = path4.resolve(templatesDir, platformDir);
-  const files = [];
-  for (const file of comp.files) {
-    const filePath = path4.resolve(sourceDir, file);
-    if (await fs4.pathExists(filePath)) {
-      const content = await fs4.readFile(filePath, "utf-8");
-      files.push({ path: `ui/${file}`, type: "registry:ui", content });
-    }
-  }
-  const utilsPath = path4.resolve(sourceDir, "lib", "utils.ts");
-  const utilsContent = await fs4.pathExists(utilsPath) ? await fs4.readFile(utilsPath, "utf-8") : void 0;
-  return {
-    name: comp.name,
-    type: "registry:ui",
-    description: comp.description,
-    platform: comp.platform,
-    dependencies: Object.keys(comp.npmDependencies),
-    registryDependencies: comp.internalDependencies,
-    files,
-    utils: utilsContent ? { path: "lib/utils.ts", content: utilsContent } : void 0
-  };
-}
 async function getComponentContent(name, config) {
-  if (config.registry) {
-    try {
-      return await fetchComponent(config.registry, name);
-    } catch {
-    }
+  if (!config.registry) {
+    throw new Error(
+      "No registry URL configured. Run `rad-ui init` first."
+    );
+  }
+  try {
+    return await fetchComponent(config.registry, name);
+  } catch {
+    throw new Error(
+      `Failed to fetch component "${name}" from ${config.registry}. Is the registry available?`
+    );
   }
-  return readBundledTemplate(name, config.platform);
 }
 async function addCommand(componentNames, opts) {
   const cwd = process.cwd();
@@ -1188,8 +1160,8 @@ async function addCommand(componentNames, opts) {
     for (const file of item.files) {
       let content = file.content;
       content = transformImports(content, config);
-      const fileName = path4.basename(file.path);
-      const destPath = path4.resolve(componentsDir, fileName);
+      const relPath = file.path.replace(/^ui\//, "");
+      const destPath = path4.resolve(componentsDir, relPath);
       await fs4.ensureDir(path4.dirname(destPath));
       await fs4.writeFile(destPath, content, "utf-8");
       copiedCount++;
@@ -1254,6 +1226,100 @@ function getInstallCommand2(pm, packages) {
   }
 }
 
+// src/commands/build.ts
+import path5 from "path";
+import fs5 from "fs-extra";
+import * as p3 from "@clack/prompts";
+import chalk4 from "chalk";
+function parseDep(dep) {
+  const atIndex = dep.lastIndexOf("@");
+  if (atIndex > 0) {
+    return {
+      name: dep.slice(0, atIndex),
+      version: dep.slice(atIndex + 1)
+    };
+  }
+  return { name: dep };
+}
+function getRelativePath(registryDir, filePath) {
+  return filePath.replace(`${registryDir}/`, "");
+}
+async function buildCommand(registryPath, opts) {
+  const cwd = opts.cwd ? path5.resolve(opts.cwd) : process.cwd();
+  const registryJsonPath = path5.resolve(cwd, registryPath);
+  const outputDir = path5.resolve(cwd, opts.output ?? "./public/r");
+  p3.intro(chalk4.bold("Build Rad UI Registry"));
+  if (!await fs5.pathExists(registryJsonPath)) {
+    p3.log.error(
+      `Registry file not found: ${chalk4.cyan(registryJsonPath)}`
+    );
+    p3.log.info(
+      `Create a ${chalk4.cyan("registry.json")} file or specify a path: ${chalk4.gray("rad-ui build ./path/to/registry.json")}`
+    );
+    process.exit(1);
+  }
+  const s = p3.spinner();
+  s.start("Reading registry.json...");
+  const registry = await fs5.readJson(registryJsonPath);
+  s.message(`Building ${registry.items.length} components...`);
+  await fs5.ensureDir(outputDir);
+  const utilsPath = path5.resolve(cwd, registry.registryDir, "lib", "utils.ts");
+  const utilsContent = await fs5.pathExists(utilsPath) ? await fs5.readFile(utilsPath, "utf-8") : null;
+  let built = 0;
+  const warnings = [];
+  for (const item of registry.items) {
+    const files = [];
+    for (const file of item.files) {
+      const filePath = path5.resolve(cwd, file.path);
+      if (!await fs5.pathExists(filePath)) {
+        warnings.push(`${item.name}: ${file.path} not found, skipped`);
+        continue;
+      }
+      const content = await fs5.readFile(filePath, "utf-8");
+      files.push({
+        path: getRelativePath(registry.registryDir, file.path),
+        type: file.type,
+        content
+      });
+    }
+    const depNames = item.dependencies.map((d) => parseDep(d).name);
+    const registryItem = {
+      name: item.name,
+      type: item.type,
+      description: item.description,
+      platform: item.platform,
+      dependencies: depNames,
+      registryDependencies: item.registryDependencies,
+      files,
+      utils: utilsContent ? { path: "lib/utils.ts", content: utilsContent } : void 0
+    };
+    const outputPath = path5.resolve(outputDir, `${item.name}.json`);
+    await fs5.writeFile(
+      outputPath,
+      JSON.stringify(registryItem, null, 2),
+      "utf-8"
+    );
+    built++;
+  }
+  const index = registry.items.map((item) => ({
+    name: item.name,
+    description: item.description,
+    platform: item.platform,
+    dependencies: item.dependencies.map((d) => parseDep(d).name),
+    registryDependencies: item.registryDependencies
+  }));
+  const indexPath = path5.resolve(outputDir, "index.json");
+  await fs5.writeFile(indexPath, JSON.stringify(index, null, 2), "utf-8");
+  s.stop(`Built ${built} components + index.json`);
+  if (warnings.length > 0) {
+    for (const w of warnings) {
+      p3.log.warn(w);
+    }
+  }
+  p3.log.info(`Output: ${chalk4.cyan(outputDir)}`);
+  p3.outro("Registry built successfully!");
+}
+
 // src/index.ts
 var program = new Command();
 program.name("rad-ui").description(
@@ -1261,4 +1327,5 @@ program.name("rad-ui").description(
 ).version("0.1.0");
 program.command("init").description("Initialize Rad UI in your project").option("-y, --yes", "Skip confirmation prompts and use defaults").action(initCommand);
 program.command("add").description("Add components to your project").argument("[components...]", "Components to add (space-separated)").option("-a, --all", "Add all available components").option("-o, --overwrite", "Overwrite existing components").option("-p, --path <path>", "Custom path for components").action(addCommand);
+program.command("build").description("Build registry JSON from registry.json").argument("[registry]", "Path to registry.json", "./registry.json").option("-o, --output <dir>", "Output directory", "./public/r").option("--cwd <path>", "Working directory").action(buildCommand);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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",
@@ -9,14 +9,12 @@
     "rad-ui": "dist/index.js"
   },
   "files": [
-    "dist",
-    "templates"
+    "dist"
   ],
   "scripts": {
-    "prebuild": "node scripts/sync-templates.js",
     "build": "tsup",
     "dev": "tsup --watch",
-    "clean": "rm -rf dist templates/web templates/mobile"
+    "clean": "rm -rf dist"
   },
   "dependencies": {
     "commander": "^12.1.0",

package/templates/web/aspect-ratio.tsx

@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };

package/templates/web/avatar.tsx

@@ -1,47 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { cn } from "../lib/utils";
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };

package/templates/web/badge.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { type VariantProps, cva } from "class-variance-authority";
-import { cn } from "../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

package/templates/web/button.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { type VariantProps, cva } from "class-variance-authority";
-import { cn } from "../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
-        outline:
-          "border border-border bg-background hover:bg-muted hover:text-foreground active:bg-muted/80",
-        ghost:
-          "hover:bg-muted hover:text-foreground active:bg-muted/80",
-        link:
-          "text-primary underline-offset-4 hover:underline active:text-primary/80",
-      },
-      size: {
-        sm: "h-9 px-3 text-xs rounded-md",
-        md: "h-10 px-4 py-2",
-        lg: "h-11 px-8 text-base rounded-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/templates/web/checkbox.tsx

@@ -1,34 +0,0 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import { cn } from "../lib/utils";
-
-export interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };