sparesdev 0.0.5

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,89 @@
+#!/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";
+
+const args = process.argv.slice(2);
+
+// alias support
+const layerMap = {
+  c: "component",
+  l: "layout"
+};
+
+// ------------------------
+// INIT / DOCTOR
+// ------------------------
+if (args[0] === "init") {
+  await init();
+  process.exit();
+}
+
+if (args[0] === "doctor") {
+  doctor();
+  process.exit();
+}
+
+// ------------------------
+// 🔥 GLOBAL LIST (NO LAYER)
+// sparesdev list
+// ------------------------
+if (args[0] === "list") {
+  list(); // show EVERYTHING
+  process.exit();
+}
+
+// ------------------------
+// LAYER COMMANDS
+// ------------------------
+let [layer, command, ...rest] = args;
+
+layer = layerMap[layer] || layer;
+
+// fallback: sparesdev add button → global
+if (!command) {
+  command = layer;
+  layer = "global";
+  rest = args.slice(1);
+}
+
+const validLayers = ["global", "storefront"];
+
+if (!validLayers.includes(layer)) {
+  console.log(`
+❌ Invalid layer
+
+Use:
+  sparesdev global add button
+  sparesdev storefront add product-card
+`);
+  process.exit(1);
+}
+
+// ------------------------
+// ROUTING
+// ------------------------
+switch (command) {
+  case "add":
+    add(layer, rest);
+    break;
+
+  case "list":
+    list(layer); // 👈 layer-specific
+    break;
+
+  default:
+    console.log(`
+sparesdev CLI
+
+Usage:
+  sparesdev global add button
+  sparesdev storefront add product-card
+  sparesdev list
+
+Aliases:
+  sparesdev g add button
+  sparesdev s add product-card
+`);
+}

package/core/add.js

@@ -0,0 +1,172 @@
+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);
+
+// 🔥 normalize helper (fixes breDCRumb issue)
+function normalize(str) {
+  return str.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+export function add(layer, components) {
+  if (!components.length) {
+    console.error("❌ Provide component names");
+    process.exit(1);
+  }
+
+  const config = getConfig();
+  const lang = "typescript";
+  const packageName = "spares";
+
+  if (!fs.existsSync("src/tokens.css")) {
+    console.log("⚠️ Tailwind v4 tokens missing (src/tokens.css)");
+  }
+
+  checkDeps();
+
+  const packageRoot = path.dirname(
+    require.resolve(`${packageName}/package.json`)
+  );
+
+  const projectRoot = process.cwd();
+
+  const utilsPath = path.join(packageRoot, "templates", lang, "utils");
+  const targetUtils = path.join(
+    projectRoot,
+    config.utilsPath || "src/utils"
+  );
+
+  if (!fs.existsSync(targetUtils)) {
+    fs.mkdirSync(targetUtils, { recursive: true });
+    console.log("📁 created utils folder");
+  }
+
+  if (fs.existsSync(utilsPath)) {
+    const cnPath = path.join(targetUtils, "cn.ts");
+
+    if (!fs.existsSync(cnPath)) {
+      copyRecursive(utilsPath, targetUtils);
+      console.log("✅ utils (cn) added");
+    } else {
+      console.log("ℹ️ utils already exists, skipping");
+    }
+  }
+
+  const installed = [];
+
+  for (const nameInput of components) {
+    const name = nameInput;
+
+    let basePaths = [];
+
+    if (layer === "global") {
+      basePaths = [
+        {
+          type: "components",
+          path: path.join(packageRoot, "templates", lang, "global", "components"),
+          target: path.join(projectRoot, "src/global/components")
+        },
+        {
+          type: "layouts",
+          path: path.join(packageRoot, "templates", lang, "global", "layouts"),
+          target: path.join(projectRoot, "src/global/layouts")
+        }
+      ];
+    }
+
+    if (layer === "storefront") {
+      basePaths = [
+        {
+          type: "storefront",
+          path: path.join(packageRoot, "templates", lang, "storefront"),
+          target: path.join(projectRoot, "src/storefront")
+        }
+      ];
+    }
+
+    let found = null;
+
+    for (const bp of basePaths) {
+      if (!fs.existsSync(bp.path)) continue;
+
+      const available = fs.readdirSync(bp.path);
+
+      const match = available.find(
+        c => normalize(c) === normalize(name)
+      );
+
+      if (match) {
+        found = {
+          match,
+          src: path.join(bp.path, match),
+          dest: path.join(bp.target, match),
+          type: bp.type
+        };
+        break;
+      }
+    }
+
+    // ❌ not found → suggest
+    if (!found) {
+      let suggestions = [];
+
+      for (const bp of basePaths) {
+        if (!fs.existsSync(bp.path)) continue;
+
+        const available = fs.readdirSync(bp.path);
+
+        const suggestion = available.find(c =>
+          normalize(c).includes(normalize(name))
+        );
+
+        if (suggestion) suggestions.push(suggestion);
+      }
+
+      if (suggestions.length) {
+        console.log(`❌ ${name} not found. Did you mean: ${suggestions[0]}?`);
+      } else {
+        console.log(`❌ ${name} not found`);
+      }
+
+      continue;
+    }
+
+    fs.mkdirSync(path.dirname(found.dest), { recursive: true });
+
+    copyRecursive(found.src, found.dest);
+    installed.push(found.match);
+
+    console.log(`✅ ${found.match} → ${layer}/${found.type}`);
+  }
+
+  if (installed.length) {
+    console.log(`\n🎉 Installed: ${installed.join(", ")}\n`);
+  } else {
+    console.log("❌ No components installed");
+  }
+}
+
+// -------------------------------
+function checkDeps() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+    const required = ["clsx", "tailwind-merge"];
+    const missing = required.filter(d => !deps?.[d]);
+
+    if (missing.length) {
+      console.log(`
+⚠️ Missing dependencies: ${missing.join(", ")}
+
+Run:
+npm install ${missing.join(" ")}
+`);
+    }
+  } catch {
+    console.log("⚠️ Could not read package.json");
+  }
+}

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/init.js

@@ -0,0 +1,25 @@
+import fs from "fs";
+
+export async function init() {
+  const config = {
+    language: "typescript",
+    version: "3.0",
+    style: "default",
+    componentsPath: "src/components",
+    utilsPath: "src/utils"
+  };
+
+  fs.writeFileSync(
+    "spares.config.json",
+    JSON.stringify(config, null, 2)
+  );
+
+  console.log(`\n✅ Initialized (TypeScript)\n`);
+
+  console.log(`
+⚠️ Tailwind v4 Required
+
+- Create src/index.css
+- Create src/tokens.css
+`);
+}

package/core/list.js

@@ -0,0 +1,97 @@
+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 = "spares";
+
+  let packageRoot;
+
+  try {
+    packageRoot = path.dirname(
+      require.resolve(`${packageName}/package.json`)
+    );
+  } catch {
+    console.log("❌ CLI package not found");
+    return;
+  }
+
+  // -------------------------------
+  // 📁 Paths setup
+  // -------------------------------
+  let paths = [];
+
+  if (!layer || layer === "global") {
+    paths.push({
+      label: "Components",
+      dir: path.join(packageRoot, "templates", lang, "global", "components")
+    });
+
+    paths.push({
+      label: "Layouts",
+      dir: path.join(packageRoot, "templates", lang, "global", "layouts")
+    });
+  }
+
+  if (!layer || layer === "storefront") {
+    paths.push({
+      label: "Storefront",
+      dir: path.join(packageRoot, "templates", lang, "storefront")
+    });
+  }
+
+  console.log("");
+
+  let hasAny = false;
+
+  for (const p of paths) {
+    if (!fs.existsSync(p.dir)) continue;
+
+    const items = fs.readdirSync(p.dir);
+    if (!items.length) continue;
+
+    hasAny = true;
+
+    console.log(`📦 ${p.label}:\n`);
+
+    for (const item of items) {
+      const fullPath = path.join(p.dir, item);
+      const isDir = fs.statSync(fullPath).isDirectory();
+
+      console.log(` - ${item}${isDir ? "/" : ""}`);
+
+      if (isDir) {
+        printTree(fullPath, "    ");
+      }
+    }
+
+    console.log("");
+  }
+
+  if (!hasAny) {
+    console.log("❌ No components found\n");
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "sparesdev",
+  "version": "0.0.5",
+  "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/Hero/Hero.tsx

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

package/templates/typescript/frontend/Hero/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/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,19 @@
+import fs from "fs";
+import path from "path";
+
+export function copyRecursive(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+
+  for (const item of fs.readdirSync(src)) {
+    const srcItem = path.join(src, item);
+    const destItem = path.join(dest, item);
+
+    if (fs.statSync(srcItem).isDirectory()) {
+      copyRecursive(srcItem, destItem);
+    } else {
+      if (!fs.existsSync(destItem)) {
+        fs.copyFileSync(srcItem, destItem);
+      }
+    }
+  }
+}

package/utils/getConfig.js

@@ -0,0 +1,10 @@
+import fs from "fs";
+
+export function getConfig() {
+  if (!fs.existsSync("sparesdev.config.json")) {
+    console.error("❌ Run 'sparesdev init' first");
+    process.exit(1);
+  }
+
+  return JSON.parse(fs.readFileSync("sparesdev.config.json", "utf-8"));
+}