sparesdev 0.0.2

package/LICENSE

@@ -0,0 +1,31 @@
+Copyright (c) 2026 Spares
+
+All rights reserved.
+
+This software (Spares) is provided strictly for demonstration and evaluation purposes only.
+
+Permission is granted to access and use the Software solely to evaluate its functionality, features, and capabilities.
+
+You may:
+
+- Use the Software in a limited, non-production environment for evaluation
+- Create internal demos for review purposes only
+
+You may NOT, without explicit prior written permission:
+
+- Use the Software in any production environment
+- Use the Software in any commercial, business, or client project
+- Build products, SaaS applications, or services using the Software
+- Copy, modify for redistribution, sublicense, or resell the Software
+- Repackage or distribute the Software in any form
+- Create competing tools, libraries, or systems based on the Software
+
+All evaluation usage must remain internal and must not be publicly distributed unless explicitly permitted.
+
+The user is solely responsible for reviewing and testing the Software. Any use is at your own risk.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+TO THE FULLEST EXTENT PERMITTED BY LAW, SPARES SHALL NOT BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM OR RELATED TO THE USE OR INABILITY TO USE THE SOFTWARE.
+
+You agree to indemnify and hold harmless Spares from any claims, damages, or liabilities arising from your use, misuse, or violation of these terms.

package/bin/index.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+import { add } from "../core/add.js";
+import { init } from "../core/init.js";
+import { list } from "../core/list.js";
+import { doctor } from "../core/doctor.js";
+import { frontend } from "../core/frontend.js";
+
+const args = process.argv.slice(2);
+
+// aliases
+const layerMap = {
+  c: "components",
+  l: "layouts",
+  b: "blocks",
+  p: "pages"
+};
+
+// ------------------------
+// INIT / DOCTOR / LIST
+// ------------------------
+if (args[0] === "init") {
+  const mode = args.includes("--full")
+    ? "full"
+    : "minimal";
+
+  await init(mode);
+  process.exit();
+}
+
+if (args[0] === "doctor") {
+  doctor();
+  process.exit();
+}
+
+if (args[0] === "list") {
+  list();
+  process.exit();
+}
+
+// ------------------------
+// SIMPLE ADD
+// sparesdev add button
+// sparesdev add frontend
+// ------------------------
+if (args[0] === "add") {
+  const item = args[1];
+
+  if (!item) {
+    console.log("❌ Provide a component, block, page, or frontend");
+    process.exit(1);
+  }
+
+  // frontend starter
+  if (item === "frontend") {
+    await frontend();
+    process.exit();
+  }
+
+  add("all", args.slice(1));
+  process.exit();
+}
+
+// ------------------------
+// CATEGORY ADD
+// sparesdev components add button
+// ------------------------
+let [layer, command, ...rest] = args;
+
+layer = layerMap[layer] || layer;
+
+const validLayers = [
+  "components",
+  "layouts",
+  "blocks",
+  "pages"
+];
+
+if (validLayers.includes(layer)) {
+  switch (command) {
+    case "add":
+      add(layer, rest);
+      break;
+
+    case "list":
+      list(layer);
+      break;
+
+    default:
+      console.log("❌ Invalid command");
+  }
+
+  process.exit();
+}
+
+// ------------------------
+// HELP
+// ------------------------
+console.log(`
+sparesdev CLI
+
+Usage:
+  sparesdev init
+  sparesdev doctor
+  sparesdev list
+
+  sparesdev add frontend
+  sparesdev add button
+  sparesdev add login-page
+
+Optional category:
+  sparesdev components add button
+  sparesdev layouts add header
+  sparesdev blocks add hero
+  sparesdev pages add login-page
+
+Commands:
+  init       Initialize project
+  doctor     Check setup health
+  list       List all available templates
+
+Aliases:
+  c = components
+  l = layouts
+  b = blocks
+  p = pages
+`);

package/core/add.js

@@ -0,0 +1,79 @@
+import fs from "fs";
+import path from "path";
+import { copyRecursive } from "../utils/copy.js";
+import { getConfig } from "../utils/getConfig.js";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+
+function normalize(str) {
+  return str.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+export function add(layer, components, options = {}) {
+  if (!components.length) {
+    console.error("❌ Provide component names");
+    process.exit(1);
+  }
+
+  const config = getConfig();
+  const lang = "typescript";
+  const packageName = "sparesdev";
+
+  const packageRoot = path.dirname(
+    require.resolve(`${packageName}/package.json`)
+  );
+  const projectRoot = process.cwd();
+
+  const installed = [];
+
+  const searchLayers =
+    layer === "all"
+      ? ["components", "layouts", "blocks", "pages"]
+      : [layer];
+
+  const basePaths = searchLayers.map(section => ({
+    type: section,
+    path: path.join(packageRoot, "templates", lang, section),
+    target: path.join(projectRoot, "src", section)
+  }));
+
+  for (const nameInput of components) {
+    const name = nameInput;
+
+    let found = null;
+
+    for (const bp of basePaths) {
+      if (!fs.existsSync(bp.path)) continue;
+      const available = fs.readdirSync(bp.path);
+      const match = available.find(
+        item => normalize(item) === normalize(name)
+      );
+      if (match) {
+        found = {
+          match,
+          src: path.join(bp.path, match),
+          dest: path.join(bp.target, match),
+          type: bp.type
+        };
+        break;
+      }
+    }
+
+    if (!found) {
+      console.log(`❌ ${name} not found`);
+      continue;
+    }
+
+    fs.mkdirSync(path.dirname(found.dest), { recursive: true });
+    copyRecursive(found.src, found.dest, options);
+    installed.push(found.match);
+    console.log(`✅ ${found.match} → src/${found.type}`);
+  }
+
+  if (installed.length) {
+    console.log(`\n🎉 Installed: ${installed.join(", ")}\n`);
+  } else {
+    console.log("❌ No components installed");
+  }
+}

package/core/doctor.js

@@ -0,0 +1,34 @@
+import fs from "fs";
+import { getConfig } from "../utils/getConfig.js";
+
+export function doctor() {
+  console.log("\n🩺 Sparesdev Doctor:\n");
+
+  let config;
+
+  try {
+    config = getConfig();
+    console.log(`✅ Language: TypeScript`);
+  } catch {
+    console.log("❌ sparesdev.config.json missing");
+    return;
+  }
+
+  if (fs.existsSync("src")) console.log("✅ src folder");
+  else console.log("❌ src missing");
+
+  if (fs.existsSync("src/components")) console.log("✅ components folder");
+  else console.log("❌ components folder missing");
+
+  console.log("\n📦 Tailwind v4 check:\n");
+
+if (fs.existsSync("src/index.css"))
+  console.log("✅ index.css");
+else console.log("❌ index.css missing");
+
+if (fs.existsSync("src/tokens.css"))
+  console.log("✅ tokens.css");
+else console.log("❌ tokens.css missing");
+
+  console.log("\n💡 Fix issues based on selected system\n");
+}

package/core/frontend.js

@@ -0,0 +1,57 @@
+import fs from "fs";
+import path from "path";
+
+function writeFile(filePath, content) {
+  fs.mkdirSync(path.dirname(filePath), {
+    recursive: true
+  });
+
+  fs.writeFileSync(filePath, content);
+}
+
+export async function frontend() {
+  const pages = {
+    "src/pages/LandingPage.tsx": `function LandingPage() {
+  return <div>Landing Page</div>;
+}
+
+export default LandingPage;
+`,
+    "src/pages/PricingPage.tsx": `function PricingPage() {
+  return <div>Pricing Page</div>;
+}
+
+export default PricingPage;
+`,
+    "src/pages/LoginPage.tsx": `function LoginPage() {
+  return <div>Login Page</div>;
+}
+
+export default LoginPage;
+`,
+    "src/pages/DashboardPage.tsx": `function DashboardPage() {
+  return <div>Dashboard Page</div>;
+}
+
+export default DashboardPage;
+`,
+    "src/pages/TermsPage.tsx": `function TermsPage() {
+  return <div>Terms Page</div>;
+}
+
+export default TermsPage;
+`,
+    "src/pages/NotFoundPage.tsx": `function NotFoundPage() {
+  return <div>404 Page</div>;
+}
+
+export default NotFoundPage;
+`
+  };
+
+  for (const [file, content] of Object.entries(pages)) {
+    writeFile(file, content);
+  }
+
+  console.log("✅ Frontend starter created");
+}

package/core/init.js

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+import fs from "fs";
+import path from "path";
+import { copyRecursive } from "../utils/copy.js";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+
+// -------------------------------
+// ⚡ STEP 3 → CREATE CONFIG
+// -------------------------------
+export function createConfig() {
+  const configPath = path.join(process.cwd(), "sparesdev.config.json");
+
+  if (fs.existsSync(configPath)) {
+    console.log("ℹ️ Config already exists, skipping");
+    return;
+  }
+
+  const config = {
+    language: "typescript",
+    version: "3.0",
+    style: "default",
+    componentsPath: "src/components",
+    utilsPath: "src/utils"
+  };
+
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+  console.log("✅ sparesdev.config.json created");
+}
+
+// -------------------------------
+// ⚡ INIT FUNCTION
+// -------------------------------
+export async function init(mode = "minimal") {
+  console.log(`\n🎯 Initializing sparesdev (${mode} mode)...\n`);
+
+  // STEP 1 → create config only
+  createConfig();
+
+  if (mode === "minimal") {
+    console.log("🎉 Minimal setup completed. No dependencies or files modified.\n");
+    return;
+  }
+
+  // -------------------------------
+  // Full setup
+  // -------------------------------
+  console.log("🚀 Running full setup...\n");
+
+  const projectRoot = process.cwd();
+  const packageName = "sparesdev";
+  const lang = "typescript";
+
+  let packageRoot;
+  try {
+    packageRoot = path.dirname(
+      require.resolve(`${packageName}/package.json`)
+    );
+  } catch {
+    console.log("❌ sparesdev package not found. Full setup aborted.");
+    return;
+  }
+
+  // -------------------------------
+  // Install utils if missing
+  // -------------------------------
+  const utilsPath = path.join(packageRoot, "templates", lang, "utils");
+  const targetUtils = path.join(projectRoot, "src", "utils");
+
+  if (!fs.existsSync(targetUtils)) fs.mkdirSync(targetUtils, { recursive: true });
+
+  const cnPath = path.join(targetUtils, "cn.ts");
+  if (!fs.existsSync(cnPath)) {
+    copyRecursive(utilsPath, targetUtils);
+    console.log("✅ utils (cn.ts) added");
+  } else {
+    console.log("ℹ️ utils already exists, skipping");
+  }
+
+  // -------------------------------
+  // Install tokens.css if missing
+  // -------------------------------
+  const tokensSrc = path.join(packageRoot, "templates", lang, "tokens.css");
+  const tokensDest = path.join(projectRoot, "src", "tokens.css");
+
+  if (!fs.existsSync(tokensDest) && fs.existsSync(tokensSrc)) {
+    copyRecursive(tokensSrc, tokensDest);
+    console.log("✅ tokens.css added");
+  } else if (fs.existsSync(tokensDest)) {
+    console.log("ℹ️ tokens.css already exists, skipping");
+  }
+
+  // -------------------------------
+  // Patch Vite / TS config (if missing)
+  // -------------------------------
+  const viteConfig = path.join(projectRoot, "vite.config.ts");
+  if (fs.existsSync(viteConfig)) {
+    console.log("ℹ️ Vite config exists, skipping patch");
+  } else {
+    const viteTemplate = path.join(packageRoot, "templates", lang, "vite.config.ts");
+    if (fs.existsSync(viteTemplate)) {
+      copyRecursive(viteTemplate, viteConfig);
+      console.log("✅ Vite config added");
+    }
+  }
+
+  console.log("\n🎉 Full setup completed.\n");
+}

package/core/list.js

@@ -0,0 +1,108 @@
+import fs from "fs";
+import path from "path";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+
+// -------------------------------
+// 🌳 Recursive tree printer
+// -------------------------------
+function printTree(dir, indent = "  ") {
+  const items = fs.readdirSync(dir);
+
+  for (const item of items) {
+    const fullPath = path.join(dir, item);
+    const isDir = fs.statSync(fullPath).isDirectory();
+
+    console.log(`${indent}- ${item}${isDir ? "/" : ""}`);
+
+    if (isDir) {
+      printTree(fullPath, indent + "  ");
+    }
+  }
+}
+
+// -------------------------------
+// 📦 LIST
+// -------------------------------
+export function list(layer) {
+  const lang = "typescript";
+  const packageName = "sparesdev";
+
+  let packageRoot;
+
+  try {
+    packageRoot = path.dirname(
+      require.resolve(`${packageName}/package.json`)
+    );
+  } catch {
+    console.log("❌ CLI package not found");
+    return;
+  }
+
+  // -------------------------------
+  // 📁 Sections
+  // -------------------------------
+  const sections = [
+    {
+      key: "components",
+      label: "Components"
+    },
+    {
+      key: "layouts",
+      label: "Layouts"
+    },
+    {
+      key: "blocks",
+      label: "Blocks"
+    },
+    {
+      key: "pages",
+      label: "Pages"
+    }
+  ];
+
+  const selectedSections = layer
+    ? sections.filter(section => section.key === layer)
+    : sections;
+
+  console.log("");
+
+  let hasAny = false;
+
+  for (const section of selectedSections) {
+    const dir = path.join(
+      packageRoot,
+      "templates",
+      lang,
+      section.key
+    );
+
+    if (!fs.existsSync(dir)) continue;
+
+    const items = fs.readdirSync(dir);
+
+    if (!items.length) continue;
+
+    hasAny = true;
+
+    console.log(`📦 ${section.label}:\n`);
+
+    for (const item of items) {
+      const fullPath = path.join(dir, item);
+      const isDir = fs.statSync(fullPath).isDirectory();
+
+      console.log(` - ${item}${isDir ? "/" : ""}`);
+
+      if (isDir) {
+        printTree(fullPath, "    ");
+      }
+    }
+
+    console.log("");
+  }
+
+  if (!hasAny) {
+    console.log("❌ No templates found\n");
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "sparesdev",
+  "version": "0.0.2",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "bin": {
+    "sparesdev": "bin/index.js"
+  },
+  "files": [
+    "bin",
+    "core",
+    "utils",
+    "templates",
+    "README.md"
+  ],
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/templates/typescript/components/Accordion/Accordion.tsx

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react'
+import { cn } from '@/utils/cn'
+
+interface AccordionProps {
+  children: ReactNode;    
+  className?: string;
+}
+
+function Accordion({children, className}: AccordionProps) {
+  return (
+    <div className={cn(className)}>
+      {children}
+    </div>
+  )
+}
+
+export default Accordion

package/templates/typescript/components/Accordion/AccordionButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { cn } from '@/utils/cn'
+
+interface AccordionButtonProps {
+  children: React.ReactNode;
+  className?: string;
+  icon?: React.ReactNode;
+  iconColor?: string;
+  isOpen?: boolean;
+  onClick?: () => void;
+}
+
+function AccordionButton({
+  children,
+  className,
+  icon,
+  iconColor = 'black', 
+  isOpen = false,
+  onClick,
+}: AccordionButtonProps) {
+  const defaultIcon = (
+    <svg
+      width="5.94"
+      height="9"
+      viewBox="0 0 6 9"
+      fill="none"
+      style={{
+        transform: isOpen ? 'rotate(270deg)' : 'rotate(90deg)',
+        transition: 'transform 0.3s ease',
+      }}
+    >
+      <path
+        d="M1.5 7.5L4.5 4.5L1.5 1.5"
+        stroke={iconColor}
+        strokeWidth="1"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn("flex flex-row items-center justify-between text-base font-normal tracking-wide", className)}
+    >
+      <span>{children}</span>
+      {icon || defaultIcon}
+    </button>
+  );
+}
+
+export default AccordionButton;

package/templates/typescript/components/Accordion/AccordionContent.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { cn } from '@/utils/cn'
+
+interface AccordionContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function AccordionContent({children, className}: AccordionContentProps) {
+  return (
+    <p className={cn("text-base font-normal", className)}>{children}</p>
+  )
+}
+
+export default AccordionContent

package/templates/typescript/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { cn } from '@/utils/cn'
+
+interface AccordionItemProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function AccordionItem({children, className}: AccordionItemProps) {
+  return (
+    <div className={cn(className)}>
+      {children}
+    </div>
+  )
+}
+
+export default AccordionItem

package/templates/typescript/components/Accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion';
+export { default as AccordionButton } from './AccordionButton';
+export { default as AccordionContent } from './AccordionContent';
+export { default as AccordionItem } from './AccordionItem';

package/templates/typescript/components/Avatar/Avatar.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/utils/cn"
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full items-center justify-center bg-neutral-000",
+  {
+    variants: {
+      size: {
+        sm: "w-6 h-6 text-xs font-normal",   
+        md: "w-9 h-9 text-sm font-normal",   
+        lg: "w-12 h-12 text-tiny font-normal", 
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {}
+
+function Avatar({ className, size, ...props }: AvatarProps) {
+  return (
+    <div
+      className={cn(avatarVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+export default Avatar

package/templates/typescript/components/Avatar/AvatarFallback.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { cn } from "@/utils/cn"
+
+interface AvatarFallbackProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  initials?: string
+}
+
+function AvatarFallback({
+  initials,
+  className,
+  children,
+  ...props
+}: AvatarFallbackProps) {
+  const fallbackIcon = (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7 0.5C8.38071 0.5 9.5 1.61929 9.5 3C9.5 4.38071 8.38071 5.5 7 5.5C5.61929 5.5 4.5 4.38071 4.5 3C4.5 1.61929 5.61929 0.5 7 0.5Z" fill="currentColor" stroke="currentColor"/>
+      <path d="M7 7.5C9.48528 7.5 11.5 9.51472 11.5 12V13.5H2.5V12C2.5 9.51472 4.51472 7.5 7 7.5Z" fill="currentColor" stroke="currentColor"/>
+    </svg>
+  )
+
+  return (
+    <span
+      className={cn(
+        "flex h-full w-full items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children ?? initials ?? fallbackIcon}
+    </span>
+  )
+}
+
+export default AvatarFallback

package/templates/typescript/components/Avatar/AvatarImage.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react"
+import { cn } from "@/utils/cn"
+
+interface AvatarImageProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+    className?: "string";
+  }
+
+function AvatarImage({ className, ...props }: AvatarImageProps) {
+  const [error, setError] = useState(false)
+
+  if (error) return null
+
+  return (
+    <img
+      className={cn("aspect-square h-full w-full object-cover", className)}
+      onError={() => setError(true)}
+      {...props}
+    />
+  )
+}
+
+export default AvatarImage

package/templates/typescript/components/Avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar';
+export { default as AvatarFallback } from './AvatarFallback';
+export { default as AvatarImage } from './AvatarImage';

package/templates/typescript/components/Backdrop/Backdrop.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { cn } from "@/utils/cn";
+
+interface BackdropProps {
+  className?: string;
+}
+
+function Backdrop({ className }: BackdropProps) {
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 bg-neutral-000/70 backdrop-blur-sm z-40",
+        className
+      )}
+    />
+  );
+}
+
+export default Backdrop;

package/templates/typescript/components/Backdrop/index.ts

@@ -0,0 +1 @@
+export { default as Backdrop } from './Backdrop';

package/templates/typescript/components/Badge/Badge.tsx

@@ -0,0 +1,63 @@
+import { cn } from "@/utils/cn"
+import { cva, type VariantProps } from "class-variance-authority"
+import React from "react"
+
+const badgeVariants = cva(
+  "font-normal rounded-md inline-flex items-center justify-center gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral-700 text-white",
+        text: "bg-transparent text-neutral-900 px-0",
+        capsule: "rounded-full bg-neutral-700 text-white",
+        outline: "border border-neutral-900",
+        icon: "bg-neutral-900 text-white px-0",
+        indicator: "bg-neutral-900 rounded-full p-0",
+      },
+
+      size: {
+        sm: "h-5 px-2 text-xs",
+        md: "h-6 px-3 text-sm",
+        lg: "h-8 px-4 text-base",
+      },
+    },
+
+    compoundVariants: [
+      {
+        variant: "indicator",
+        size: "sm",
+        className: "w-1 h-1 px-0",
+      },
+      {
+        variant: "indicator",
+        size: "md",
+        className: "w-2 h-2 px-0",
+      },
+      {
+        variant: "indicator",
+        size: "lg",
+        className: "w-3 h-3 px-0",
+      },
+    ],
+
+    defaultVariants: {
+      variant: "default",
+      size: "sm",
+    },
+  }
+)
+
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  children?: React.ReactNode
+  className?: string
+}
+
+function Badge({ children, className, variant, size }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant, size }), className)}>
+      {children}
+    </span>
+  )
+}
+
+export default Badge

package/templates/typescript/components/Badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from './Badge';

package/templates/typescript/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/utils/cn"
+
+const breadcrumbVariants = cva(
+  "flex items-center text-neutral-500",
+  {
+    variants: {
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+interface BreadcrumbProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof breadcrumbVariants> {}
+
+function Breadcrumb({ className, size, ...props }: BreadcrumbProps) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      className={cn(breadcrumbVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+export default Breadcrumb

package/templates/typescript/components/Breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { cn } from "@/utils/cn"
+
+interface BreadcrumbItemProps
+  extends React.HTMLAttributes<HTMLLIElement> {
+    className?: string;
+  }
+
+function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
+  return (
+    <li
+      className={cn("inline-flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+export default BreadcrumbItem

package/templates/typescript/components/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { Link, type LinkProps } from "react-router-dom"
+import { cn } from "@/utils/cn"
+
+interface BreadcrumbLinkProps extends LinkProps {
+  className?: string
+}
+
+function BreadcrumbLink({ className, ...props }: BreadcrumbLinkProps) {
+  return (
+    <Link
+      className={cn(
+        "transition-colors hover:text-black",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export default BreadcrumbLink

package/templates/typescript/components/Breadcrumb/BreadcrumbList.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { cn } from "@/utils/cn"
+
+interface BreadcrumbListProps
+  extends React.HTMLAttributes<HTMLOListElement> {
+    className?: string;
+  }
+
+function BreadcrumbList({ className, ...props }: BreadcrumbListProps) {
+  return (
+    <ol
+      className={cn("flex items-center flex-wrap", className)}
+      {...props}
+    />
+  )
+}
+
+export default BreadcrumbList

package/templates/typescript/components/Breadcrumb/BreadcrumbPage.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { cn } from "@/utils/cn"
+
+interface BreadcrumbPageProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+    className?: string;
+  }
+
+function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
+  return (
+    <span
+      aria-current="page"
+      className={cn("font-medium text-black", className)}
+      {...props}
+    />
+  )
+}
+
+export default BreadcrumbPage

package/templates/typescript/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { cn } from "@/utils/cn"
+
+interface BreadcrumbSeparatorProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  children?: React.ReactNode
+}
+
+function BreadcrumbSeparator({
+  className,
+  children = "/",
+  ...props
+}: BreadcrumbSeparatorProps) {
+  return (
+    <span
+      role="presentation"
+      className={cn("mx-2 text-neutral-400", className)}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default BreadcrumbSeparator

package/templates/typescript/components/Breadcrumb/index.ts

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from './Breadcrumb';
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export { default as BreadcrumbLink } from './BreadcrumbLink';
+export { default as BreadcrumbList } from './BreadcrumbList';
+export { default as BreadcrumbPage } from './BreadcrumbPage';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator';

package/templates/typescript/components/Button/Button.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { cn } from '@/utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+
+const buttonVariants = cva (
+    "flex flex-row items-center justify-center gap-3 text-sm font-normal rounded-sm px-5",
+    {
+        variants: {
+            variant: {
+              primary: "bg-neutral-900 text-white hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-100 disabled:text-neutral-400",
+              secondary: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 hover:text-neutral-800 active:bg-neutral-300 active:text-neutral-900 disabled:bg-neutral-100 disabled:text-neutral-400",
+              capsule: "bg-neutral-900 text-white hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-100 disabled:text-neutral-400 rounded-full",
+              outline: "bg-transparent text-neutral-900 border border-neutral-900 hover:border-neutral-500 hover:text-neutral-500 active:border-neutral-700 active:text-neutral-700 disabled:border-neutral-100 disabled:text-neutral-400",
+              ghost: "bg-transparent text-neutral-700 hover:text-neutral-800 hover:bg-neutral-100 active:bg-neutral-200 active:text-neutral-900 disabled:text-neutral-400",
+              icon: "bg-transparent text-neutral-900 hover:text-neutral-700 active:text-neutral-500 disabled:text-neutral-400 px-0 aspect-square",
+              iconfilled: "bg-neutral-900 text-white hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 rounded-sm px-0 aspect-square"
+            },
+            size: {
+              xs: "h-6",
+              sm: "h-9",
+              md: "h-12",
+              lg: "h-14"
+            },
+        },
+        defaultVariants: {
+            variant: "primary",
+            size: "sm",
+        },
+    }
+   )
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+VariantProps<typeof buttonVariants> {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+function Button({className, variant, size, children, ...props}: ButtonProps) {
+  return (
+    <button className={cn(buttonVariants({variant, size}), className)}
+    {...props}
+    >
+        {children}
+    </button>
+  )
+}
+
+export default Button

package/templates/typescript/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button';

package/templates/typescript/frontend/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/utils/cn"
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full items-center justify-center bg-neutral-000",
+  {
+    variants: {
+      size: {
+        sm: "w-6 h-6 text-xs font-normal",   
+        md: "w-9 h-9 text-sm font-normal",   
+        lg: "w-12 h-12 text-tiny font-normal", 
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {}
+
+function Avatar({ className, size, ...props }: AvatarProps) {
+  return (
+    <div
+      className={cn(avatarVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+export default Avatar

package/templates/typescript/frontend/src/components/Avatar/AvatarFallback.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { cn } from "@/utils/cn"
+
+interface AvatarFallbackProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  initials?: string
+}
+
+function AvatarFallback({
+  initials,
+  className,
+  children,
+  ...props
+}: AvatarFallbackProps) {
+  const fallbackIcon = (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7 0.5C8.38071 0.5 9.5 1.61929 9.5 3C9.5 4.38071 8.38071 5.5 7 5.5C5.61929 5.5 4.5 4.38071 4.5 3C4.5 1.61929 5.61929 0.5 7 0.5Z" fill="currentColor" stroke="currentColor"/>
+      <path d="M7 7.5C9.48528 7.5 11.5 9.51472 11.5 12V13.5H2.5V12C2.5 9.51472 4.51472 7.5 7 7.5Z" fill="currentColor" stroke="currentColor"/>
+    </svg>
+  )
+
+  return (
+    <span
+      className={cn(
+        "flex h-full w-full items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children ?? initials ?? fallbackIcon}
+    </span>
+  )
+}
+
+export default AvatarFallback

package/templates/typescript/frontend/src/components/Avatar/AvatarImage.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react"
+import { cn } from "@/utils/cn"
+
+interface AvatarImageProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+    className?: "string";
+  }
+
+function AvatarImage({ className, ...props }: AvatarImageProps) {
+  const [error, setError] = useState(false)
+
+  if (error) return null
+
+  return (
+    <img
+      className={cn("aspect-square h-full w-full object-cover", className)}
+      onError={() => setError(true)}
+      {...props}
+    />
+  )
+}
+
+export default AvatarImage

package/templates/typescript/frontend/src/components/Avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar';
+export { default as AvatarFallback } from './AvatarFallback';
+export { default as AvatarImage } from './AvatarImage';

package/templates/typescript/frontend/src/pages/Hero.tsx

@@ -0,0 +1,8 @@
+
+function Hero() {
+  return (
+    <div>Hero</div>
+  )
+}
+
+export default Hero

package/templates/typescript/frontend/src/pages/index.ts

@@ -0,0 +1 @@
+export { default as Hero } from './Hero';

package/templates/typescript/layouts/Header/Header.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Header() {
+  return (
+    <div>Header</div>
+  )
+}
+
+export default Header

package/templates/typescript/layouts/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header';

package/templates/typescript/pages/Hero/Hero.tsx

@@ -0,0 +1,8 @@
+
+function Hero() {
+  return (
+    <div>Hero</div>
+  )
+}
+
+export default Hero

package/templates/typescript/pages/Hero/index.ts

@@ -0,0 +1 @@
+export { default as Hero } from './Hero';

package/templates/typescript/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(...inputs));
+}

package/utils/copy.js

@@ -0,0 +1,42 @@
+import fs from "fs";
+import path from "path";
+
+/**
+ * copyRecursive(src, dest, options)
+ * options:
+ *   - force: overwrite existing files
+ *   - safe: skip if exists
+ */
+export function copyRecursive(src, dest, options = {}) {
+  if (!fs.existsSync(src)) {
+    console.log(`❌ Source not found: ${src}`);
+    return;
+  }
+
+  fs.mkdirSync(dest, { recursive: true });
+
+  for (const item of fs.readdirSync(src)) {
+    const srcItem = path.join(src, item);
+    const destItem = path.join(dest, item);
+
+    const stats = fs.statSync(srcItem);
+
+    if (stats.isDirectory()) {
+      copyRecursive(srcItem, destItem, options);
+    } else {
+      if (fs.existsSync(destItem)) {
+        if (options.force) {
+          fs.copyFileSync(srcItem, destItem);
+          console.log(`✅ Overwritten: ${destItem}`);
+        } else if (options.safe) {
+          console.log(`ℹ️ Skipped existing: ${destItem}`);
+        } else {
+          console.log(`⚠️ Exists (use --force to overwrite): ${destItem}`);
+        }
+        continue;
+      }
+      fs.copyFileSync(srcItem, destItem);
+      console.log(`✅ Copied: ${destItem}`);
+    }
+  }
+}

package/utils/getConfig.js

@@ -0,0 +1,19 @@
+import fs from "fs";
+
+const CONFIG_FILE = "sparesdev.config.json";
+
+export function getConfig() {
+  if (!fs.existsSync(CONFIG_FILE)) {
+    console.error("❌ Run 'sparesdev init' first");
+    process.exit(1);
+  }
+
+  try {
+    const content = fs.readFileSync(CONFIG_FILE, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    console.error(`❌ Invalid ${CONFIG_FILE}`);
+    console.error("💡 Delete it and run 'sparesdev init' again");
+    process.exit(1);
+  }
+}