create-universal-dapp 1.0.0

package/dist/templates/vite.js

@@ -0,0 +1,784 @@
+import fs from 'fs-extra';
+import path from 'path';
+import ora from 'ora';
+export async function createViteApp(options) {
+    const spinner = ora('Setting up Vite project...').start();
+    try {
+        // Create package.json
+        await createVitePackageJson(options);
+        // Create Vite configuration files
+        await createViteConfig(options);
+        // Create source structure
+        await createViteSourceFiles(options);
+        // Create Push Chain integration files
+        await createPushChainIntegration(options);
+        // Create ESLint config if requested
+        if (options.eslint) {
+            await createESLintConfig(options);
+        }
+        // Create Tailwind config (Tailwind-only setup)
+        await createTailwindConfig(options);
+        spinner.succeed('Vite project structure created');
+    }
+    catch (error) {
+        spinner.fail('Failed to create Vite project');
+        throw error;
+    }
+}
+async function createVitePackageJson(options) {
+    const packageJson = {
+        name: options.projectName,
+        private: true,
+        version: "0.0.0",
+        type: "module",
+        scripts: {
+            dev: "vite",
+            build: "tsc && vite build",
+            lint: options.eslint ? "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0" : undefined,
+            preview: "vite preview"
+        },
+        dependencies: {
+            react: "^18.3.1",
+            "react-dom": "^18.3.1",
+            "@pushchain/ui-kit": "^1.1.33"
+        },
+        devDependencies: {
+            "@types/react": "^18.2.43",
+            "@types/react-dom": "^18.2.17",
+            "@vitejs/plugin-react": "^4.2.1",
+            typescript: "^5.2.2",
+            vite: "^5.0.8",
+            tailwindcss: "^3.3.0",
+            autoprefixer: "^10.4.16",
+            postcss: "^8.4.31"
+        }
+    };
+    // Remove undefined values
+    Object.keys(packageJson.scripts).forEach(key => {
+        const scripts = packageJson.scripts;
+        if (scripts[key] === undefined) {
+            delete scripts[key];
+        }
+    });
+    await fs.writeJSON(path.join(options.targetDir, 'package.json'), packageJson, { spaces: 2 });
+}
+async function createViteConfig(options) {
+    // Vite config
+    const viteConfig = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})`;
+    await fs.writeFile(path.join(options.targetDir, 'vite.config.ts'), viteConfig);
+    // TypeScript config
+    const tsConfig = {
+        compilerOptions: {
+            target: "ES2020",
+            useDefineForClassFields: true,
+            lib: ["ES2020", "DOM", "DOM.Iterable"],
+            module: "ESNext",
+            skipLibCheck: true,
+            moduleResolution: "bundler",
+            allowImportingTsExtensions: true,
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: "react-jsx",
+            strict: true,
+            noUnusedLocals: true,
+            noUnusedParameters: true,
+            noFallthroughCasesInSwitch: true,
+            baseUrl: ".",
+            paths: {
+                "@/*": ["./src/*"]
+            }
+        },
+        include: ["src"],
+        references: [{ "path": "./tsconfig.node.json" }]
+    };
+    await fs.writeJSON(path.join(options.targetDir, 'tsconfig.json'), tsConfig, { spaces: 2 });
+    // Node TypeScript config
+    const tsNodeConfig = {
+        compilerOptions: {
+            composite: true,
+            skipLibCheck: true,
+            module: "ESNext",
+            moduleResolution: "bundler",
+            allowSyntheticDefaultImports: true
+        },
+        include: ["vite.config.ts"]
+    };
+    await fs.writeJSON(path.join(options.targetDir, 'tsconfig.node.json'), tsNodeConfig, { spaces: 2 });
+}
+async function createViteSourceFiles(options) {
+    // Create src directory structure
+    const srcDir = path.join(options.targetDir, 'src');
+    const componentsDir = path.join(srcDir, 'components');
+    const libDir = path.join(srcDir, 'lib');
+    await fs.ensureDir(srcDir);
+    await fs.ensureDir(componentsDir);
+    await fs.ensureDir(libDir);
+    // Create index.html
+    const indexHtml = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${options.projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>`;
+    await fs.writeFile(path.join(options.targetDir, 'index.html'), indexHtml);
+    // Create main.tsx
+    const mainTsx = `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { PushChainProviders } from './providers/PushChainProviders.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <PushChainProviders>
+      <App />
+    </PushChainProviders>
+  </StrictMode>,
+)`;
+    await fs.writeFile(path.join(srcDir, 'main.tsx'), mainTsx);
+    // Create App.tsx
+    const appTsx = `import './App.css'
+import { PushUniversalAccountButton, usePushWalletContext } from '@pushchain/ui-kit'
+
+function App() {
+  const { universalAccount } = usePushWalletContext();
+
+  console.log("universalAccount", universalAccount);
+  
+  return (
+    <div style={{ minHeight: '100vh', padding: '2rem' }}>
+      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+          <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
+            Welcome to ${options.projectName}
+          </h1>
+          <p style={{ fontSize: '1.2rem', color: '#666', marginBottom: '2rem' }}>
+            Your Push Chain application is ready to go!
+          </p>
+        </div>
+        
+        <div style={{ 
+          maxWidth: '600px', 
+          margin: '0 auto', 
+          padding: '2rem', 
+          border: '1px solid #ddd', 
+          borderRadius: '8px',
+          textAlign: 'center'
+        }}>
+          <h2 style={{ marginBottom: '1rem' }}>Push Chain Integration</h2>
+          <div style={{ marginBottom: '1rem' }}>
+            <span style={{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              backgroundColor: universalAccount ? '#22c55e' : '#6b7280',
+              color: 'white',
+              fontSize: '12px'
+            }}>
+              {universalAccount ? "Connected" : "Not Connected"}
+            </span>
+          </div>
+          
+          <div style={{ marginBottom: '2rem' }}>
+            <PushUniversalAccountButton />
+          </div>
+          
+          {universalAccount && (
+            <div style={{ 
+              marginTop: '2rem', 
+              padding: '1rem', 
+              backgroundColor: '#f5f5f5', 
+              borderRadius: '6px',
+              textAlign: 'left'
+            }}>
+              <h3 style={{ fontWeight: 'bold', marginBottom: '0.5rem' }}>Account Details:</h3>
+              <pre style={{ fontSize: '0.8rem', overflow: 'auto' }}>
+                {JSON.stringify(universalAccount, null, 2)}
+              </pre>
+            </div>
+          )}
+          
+          <div style={{ fontSize: '0.9rem', color: '#666', marginTop: '2rem', textAlign: 'left' }}>
+            <p><strong>Next steps:</strong></p>
+            <ul style={{ margin: '0.5rem 0', paddingLeft: '1.5rem' }}>
+              <li>Configure your Push Chain settings in providers/PushChainProviders.tsx</li>
+              <li>Customize the app metadata with your branding</li>
+              <li>Add your chain configuration and RPC URLs</li>
+              <li>Explore the @pushchain/ui-kit for more components</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App`;
+    await fs.writeFile(path.join(srcDir, 'App.tsx'), appTsx);
+    // Create App.css
+    const appCss = `#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}`;
+    await fs.writeFile(path.join(srcDir, 'App.css'), appCss);
+    // Create index.css (Tailwind directives only)
+    const indexCss = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}`;
+    await fs.writeFile(path.join(srcDir, 'index.css'), indexCss);
+    // Create vite-env.d.ts
+    const viteEnv = `/// <reference types="vite/client" />`;
+    await fs.writeFile(path.join(srcDir, 'vite-env.d.ts'), viteEnv);
+}
+async function createPushChainIntegration(options) {
+    // Create providers directory
+    const providersDir = path.join(options.targetDir, 'src', 'providers');
+    await fs.ensureDir(providersDir);
+    // Create PushChainProviders.tsx following your pattern
+    const pushchainProviders = `import {
+  PushUI,
+  PushUniversalWalletProvider,
+  type AppMetadata,
+  type ProviderConfigProps,
+} from "@pushchain/ui-kit";
+
+/**
+ * PushChainProviders Component
+ * 
+ * This component wraps your entire application with Push Chain's Universal Wallet Provider.
+ * It configures the wallet connection options, network settings, and app metadata.
+ * 
+ * Configuration Guide:
+ * - network: Choose between MAINNET, TESTNET, or DEV
+ * - login: Configure authentication methods (email, google, wallet)
+ * - modal: Customize the UI appearance and behavior
+ * - chainConfig: Add your custom RPC endpoints
+ * - appMetadata: Brand your app with logo, title, and description
+ */
+
+const PushChainProviders = ({ children }: { children: React.ReactNode }) => {
+  // Wallet configuration - customize these settings for your app
+  const walletConfig: ProviderConfigProps = {
+    // Network selection: MAINNET for production, TESTNET for development
+    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET,
+    
+    // Login options - enable/disable authentication methods
+    login: {
+      email: true,        // Allow email authentication
+      google: true,       // Allow Google OAuth
+      wallet: {
+        enabled: true,    // Allow wallet connection (MetaMask, etc.)
+      },
+      appPreview: true,   // Show app preview in login modal
+    },
+    
+    // Modal UI customization
+    modal: {
+      // Layout: SPLIT (side-by-side) or STACKED (vertical)
+      loginLayout: PushUI.CONSTANTS.LOGIN.LAYOUT.SPLIT,
+      
+      // Connected wallet display: HOVER (on hover) or FULL (always visible)
+      connectedLayout: PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER,
+      
+      // Show app preview in modals
+      appPreview: true,
+      
+      // Background interaction when modal is open: BLUR or NONE
+      connectedInteraction: PushUI.CONSTANTS.CONNECTED.INTERACTION.BLUR,
+    },
+    
+    // Chain configuration - add your custom RPC endpoints here
+    chainConfig: {
+      rpcUrls: {
+        // Ethereum Sepolia testnet (for testing)
+        "eip155:11155111": ["https://sepolia.gateway.tenderly.co/"],
+        
+        // Add more chains as needed:
+        // "eip155:1": ["https://mainnet.infura.io/v3/YOUR_PROJECT_ID"], // Ethereum Mainnet
+        // "eip155:137": ["https://polygon-rpc.com/"], // Polygon
+        // "eip155:42161": ["https://arb1.arbitrum.io/rpc"], // Arbitrum
+      },
+    },
+  };
+
+  // App metadata - customize with your app's branding
+  const appMetadata: AppMetadata = {
+    // Your app's logo URL (can be a URL or base64 data URI)
+    logoUrl: "https://avatars.githubusercontent.com/u/64157541?v=4",
+    
+    // Your app's display name
+    title: "${options.projectName}",
+    
+    // Brief description of your app (shown in wallet connection prompts)
+    description:
+      "Push Chain is a shared state L1 blockchain that allows all chains to unify, enabling apps of any chain to be accessed by users of any chain.",
+  };
+
+  return (
+    <PushUniversalWalletProvider config={walletConfig} app={appMetadata}>
+      {children}
+    </PushUniversalWalletProvider>
+  );
+};
+
+export { PushChainProviders };`;
+    await fs.writeFile(path.join(providersDir, 'PushChainProviders.tsx'), pushchainProviders);
+    // Create .env file with configuration notes
+    const envFile = `# Push Chain Configuration
+# 
+# This file contains environment variables for your Push Chain application.
+# Copy this file to .env.local for local development.
+#
+# IMPORTANT: Never commit sensitive API keys to version control!
+
+# Push Chain Network Configuration
+# Options: mainnet, testnet, dev
+VITE_PUSHCHAIN_NETWORK=testnet
+
+# Optional: Custom API endpoints (if you have specific requirements)
+# VITE_PUSHCHAIN_API_ENDPOINT=https://your-custom-endpoint.com
+
+# Optional: App-specific configuration
+# VITE_APP_NAME=${options.projectName}
+# VITE_APP_VERSION=1.0.0`;
+    await fs.writeFile(path.join(options.targetDir, '.env'), envFile);
+}
+async function createESLintConfig(options) {
+    const eslintConfig = {
+        root: true,
+        env: { browser: true, es2020: true },
+        extends: [
+            'eslint:recommended',
+            '@typescript-eslint/recommended',
+            'eslint-plugin-react-hooks/recommended',
+        ],
+        ignorePatterns: ['dist', '.eslintrc.cjs'],
+        parser: '@typescript-eslint/parser',
+        plugins: ['react-refresh'],
+        rules: {
+            'react-refresh/only-export-components': [
+                'warn',
+                { allowConstantExport: true },
+            ],
+        },
+    };
+    await fs.writeJSON(path.join(options.targetDir, '.eslintrc.json'), eslintConfig, { spaces: 2 });
+}
+async function createTailwindConfig(options) {
+    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}`;
+    await fs.writeFile(path.join(options.targetDir, 'tailwind.config.js'), tailwindConfig);
+    // PostCSS config
+    const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+    await fs.writeFile(path.join(options.targetDir, 'postcss.config.js'), postcssConfig);
+}
+async function createShadcnConfig(options) {
+    const componentsJson = {
+        "$schema": "https://ui.shadcn.com/schema.json",
+        "style": "default",
+        "rsc": false,
+        "tsx": true,
+        "tailwind": {
+            "config": "tailwind.config.js",
+            "css": "src/index.css",
+            "baseColor": "slate",
+            "cssVariables": true
+        },
+        "aliases": {
+            "components": "@/components",
+            "utils": "@/lib/utils"
+        }
+    };
+    await fs.writeJSON(path.join(options.targetDir, 'components.json'), componentsJson, { spaces: 2 });
+    // Create basic shadcn components (same as Next.js version)
+    const componentsDir = path.join(options.targetDir, 'src', 'components', 'ui');
+    await fs.ensureDir(componentsDir);
+    // Button component (same as Next.js)
+    const buttonComponent = `import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }`;
+    await fs.writeFile(path.join(componentsDir, 'button.tsx'), buttonComponent);
+    // Card and Badge components (same as Next.js)
+    const cardComponent = `import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }`;
+    await fs.writeFile(path.join(componentsDir, 'card.tsx'), cardComponent);
+    const badgeComponent = `import * as React from "react"
+import { cva, type VariantProps } 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 }`;
+    await fs.writeFile(path.join(componentsDir, 'badge.tsx'), badgeComponent);
+    // Utils file (same as Next.js)
+    const libDir = path.join(options.targetDir, 'src', 'lib');
+    const utilsFile = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}`;
+    await fs.writeFile(path.join(libDir, 'utils.ts'), utilsFile);
+}
+//# sourceMappingURL=vite.js.map