@ghatak/slash-ui 1.0.0

package/components/ui/pricing.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Check, Zap } from 'lucide-react';
+
+const PricingCard = ({
+  
+  tier,
+  price,
+  description,
+  features,
+  href,
+  isHighlighted = false,
+}: {
+  tier: string;
+  price: string;
+  description: string;
+  features: string[];
+  href: string;
+  isHighlighted?: boolean;
+}) => {
+  return (
+    <div
+      className={`relative flex flex-col p-8 rounded-3xl border transition-all duration-500 overflow-hidden h-full ${
+        isHighlighted
+          ? 'border-white bg-neutral-900 shadow-[0_0_50px_-12px_rgba(255,255,255,0.2)]'
+          : 'border-white/10 bg-neutral-900 text-zinc-400'
+      }`}
+    >
+      {isHighlighted && (
+        <>
+          <div className='absolute -top-[20%] -right-[20%] w-[70%] h-[70%] bg-white/10 blur-[100px] pointer-events-none' />
+
+          <div className='absolute inset-0 pointer-events-none z-0'>
+            <img
+              src='/images/PricingSlash.svg'
+              alt=''
+              className='w-full h-full object-cover scale-150 rotate-[-5deg] opacity-90'
+            />
+          </div>
+
+          <div className='absolute inset-0 rounded-3xl border border-white/20 animate-pulse pointer-events-none' />
+        </>
+      )}
+
+      <div
+        className={`relative flex flex-col h-full ${isHighlighted ? 'z-10 mix-blend-difference' : 'z-10'}`}
+      >
+        <div className='mb-8'>
+          <h3
+            className={`text-xs uppercase font-mono tracking-widest ${isHighlighted ? 'text-white' : 'text-zinc-500'}`}
+          >
+            {tier}
+          </h3>
+          <p
+            className={`text-sm mt-3 font-medium leading-relaxed ${isHighlighted ? 'text-white' : 'text-zinc-400'}`}
+          >
+            {description}
+          </p>
+        </div>
+
+        <div className='mb-8 flex items-baseline gap-1'>
+          <span
+            className={`text-6xl font-black tracking-tighter ${isHighlighted ? 'text-white' : 'text-zinc-100'}`}
+          >
+            {price}
+          </span>
+          <span className='text-zinc-500 text-[10px] uppercase tracking-widest ml-2'>
+            Lifetime Access
+          </span>
+        </div>
+
+        <div className='space-y-4 mb-10 flex-grow'>
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className='flex items-center gap-3 text-[13px] font-cartographCF'
+            >
+              <Check
+                size={14}
+                className={isHighlighted ? 'text-white' : 'text-zinc-600'}
+              />
+              <span className={isHighlighted ? 'text-white' : 'text-zinc-500'}>
+                {feature}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div className='relative z-20'>
+          <Link
+            href={'https://app.archway.finance/payment-requests/HDGAY/public'}
+            className={`w-full py-4 rounded-xl font-beVietnamPro text-xs transition-all duration-500 flex items-center justify-center cursor-pointer ${
+              isHighlighted
+                ? 'bg-white text-black hover:shadow-[0_0_20px_rgba(255,255,255,0.4)] hover:bg-zinc-100'
+                : 'bg-transparent text-white border border-white/20 hover:border-white/60'
+            }`}
+          >
+            Select {tier}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Pricing = () => {
+  return (
+    <section className='w-full py-32 px-8 '>
+      <div className='max-w-4xl mx-auto'>
+        <div className='flex flex-col items-center text-center mb-20'>
+          <div className='flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-zinc-950 mb-6'>
+            <Zap size={12} className='text-white' />
+            <span className='text-[10px] font-bold text-zinc-400 uppercase tracking-widest'>
+              Pricing Plans
+            </span>
+          </div>
+          <h2 className='text-5xl font-black text-white uppercase tracking-tighter mb-6'>
+            Unlock the Full Library
+          </h2>
+          <p className='text-zinc-500 text-sm max-w-lg leading-relaxed'>
+            Professional-grade UI components for Next.js and Tailwind. Choose
+            the pack that fits your scale.
+          </p>
+        </div>
+
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch'>
+          <PricingCard
+            tier='Standard'
+            price='$50'
+            href='https://app.archway.finance/payment-requests/HDGAY/public'
+            description='Perfect for individual projects and hobbyists.'
+            features={[
+              '30+ Open Source Components',
+              'React / Tailwind Templates',
+              'Community Support',
+              'Lifetime Access',
+            ]}
+          />
+
+          <PricingCard
+          
+            tier='Premium'
+            isHighlighted={true}
+            price='$129'
+            href='https://app.archway.finance/payment-requests/HDGAY/public'
+            description='Full access for professionals and agency work.'
+            features={[
+              '100+ Premium Components',
+              'Agency/Commercial License',
+              'Priority Feature Requests',
+              'Figma Design Files',
+              'Private Discord Access',
+            ]}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Pricing;

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/hooks/use-component-search.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { createContext, useContext, useState, useMemo } from 'react';
+import { Home, Box } from 'lucide-react';
+import { Index } from '@/__registry__'; 
+
+const SearchContext = createContext<any>(undefined);
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const staticPages = useMemo(() => [
+    { icon: Home, label: 'Home', category: 'Pages', path: '/' },
+  ], []);
+
+  const componentsList = useMemo(() => {
+    return Object.values(Index['default'] || {}).map((comp: any) => ({
+      icon: Box,
+      label: comp.name,
+      category: 'Components',
+      path: `/component/${comp.name}`,
+    }));
+  }, []);
+
+  const allItems = useMemo(() => [...staticPages, ...componentsList], [staticPages, componentsList]);
+
+  const filteredItems = useMemo(() => {
+    return allItems.filter((item) =>
+      item.label.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery, allItems]);
+
+  return (
+    <SearchContext.Provider
+      value={{
+        searchQuery,
+        setSearchQuery,
+        filteredItems,
+        staticPages,
+        totalComponents: componentsList.length,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+}
+
+export const useSearch = () => {
+  const context = useContext(SearchContext);
+  if (!context) throw new Error('useSearch must be used within a SearchProvider');
+  return context;
+};

package/lib/actions/auth.action.ts

@@ -0,0 +1,88 @@
+'use server';
+
+import bcrypt from 'bcryptjs';
+import jwt from 'jsonwebtoken';
+import { prisma } from '@/lib/prisma';
+import { randomInt } from 'crypto';
+import { sendOtpEmail } from '../email';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function sendOtp(formData: FormData) {
+  const email = formData.get('email') as string;
+
+  const rawOtp = randomInt(100000, 999999).toString();
+  const hashedOtp = await bcrypt.hash(rawOtp, 10);
+
+  await prisma.otp.create({
+    data: {
+      email,
+      code: hashedOtp,
+      expiresAt: new Date(Date.now() + 5 * 60 * 1000),
+    },
+  });
+
+  await sendOtpEmail(email, rawOtp);
+
+  return { success: true };
+}
+
+export async function verifyOtp(formData: FormData) {
+  const email = formData.get('email') as string;
+  const otp = formData.get('otp') as string;
+
+  try {
+    const record = await prisma.otp.findFirst({
+      where: {
+        email,
+        expiresAt: { gt: new Date() },
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+
+    if (!record) {
+      return { success: false, message: 'OTP expired' };
+    }
+
+    const valid = await bcrypt.compare(otp, record.code);
+
+    if (!valid) {
+      return { success: false, message: 'Invalid OTP' };
+    }
+
+    await prisma.otp.deleteMany({ where: { email } });
+
+    let user = await prisma.user.findUnique({ where: { email } });
+
+    if (!user) {
+      user = await prisma.user.create({ data: { email } });
+    }
+
+    const token = jwt.sign(
+      { email: user.email, id: user.id },
+      process.env.JWT_SECRET!,
+      { expiresIn: '7d' },
+    );
+
+    const cookieStore = await cookies();
+
+    cookieStore.set('access_token', token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 60 * 60 * 24 * 7,
+    });
+  } catch (err) {
+    console.error(err);
+    return { success: false, message: 'Server error' };
+  }
+
+  redirect('/account');
+}
+
+export async function logout() {
+  const cookieStore = await cookies();
+  cookieStore.delete('access_token');
+  redirect('/');
+}

package/lib/auth.ts

@@ -0,0 +1,18 @@
+import { cookies } from "next/headers";
+import jwt from "jsonwebtoken";
+
+export async function getCurrentUserEmail() {
+  const token = (await cookies()).get("access_token")?.value;
+
+  if (!token) return null;
+
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET!) as {
+      email: string;
+    };
+
+    return decoded.email;
+  } catch {
+    return null;
+  }
+}

package/lib/email.ts

@@ -0,0 +1,46 @@
+import nodemailer from 'nodemailer';
+
+export async function sendOtpEmail(email: string, otp: string) {
+  const transporter = nodemailer.createTransport({
+    service: 'gmail',
+    auth: {
+      user: process.env.EMAIL_USER,
+      pass: process.env.EMAIL_APP_PASSWORD,
+    },
+  });
+
+  const response = await transporter.sendMail({
+    from: `"Slash/UI" <${process.env.EMAIL_USER}>`,
+    to: email,
+    subject: 'Your verification code',
+    html: `
+      <div style="font-family: 'Helvetica Neue', Helvetica, sans-serif; max-width: 600px; margin: 0 auto; padding: 40px 20px; color: #1a1a1a;">
+        <div style="margin-bottom: 32px;">
+          <div style="display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.02em;">
+            <span>SLASH/UI</span>
+          </div>
+        </div>
+        
+        <h2 style="font-size: 24px; font-weight: 600; margin-bottom: 8px; color: #000;">Your verification code</h2>
+        <p style="font-size: 16px; color: #666; margin-bottom: 32px;">Use the one-time code below to continue.</p>
+        
+        <div style="background-color: #f7f7f7; border-radius: 12px; padding: 24px; text-align: center; margin-bottom: 32px;">
+          <span style="font-size: 32px; font-weight: 500; letter-spacing: 12px; color: #000; font-family: monospace;">${otp}</span>
+        </div>
+        
+        <p style="font-size: 14px; color: #888; line-height: 1.5; margin-bottom: 24px;">
+          This code will expire in 5 minutes and can only be used once.<br />
+          For your security, do not share this code with anyone.
+        </p>
+        
+        <div style="font-size: 14px; color: #666;">
+          Have fun,<br />
+          <strong style="color: #000;">The Slash/UI Team</strong>
+        </div>
+      </div>
+    `,
+  });
+
+  return response;
+}
+

package/lib/prisma.ts

@@ -0,0 +1,14 @@
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = global as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: ["query"], 
+  });
+
+if (process.env.NODE_ENV !== "production")
+  globalForPrisma.prisma = prisma;

package/lib/registry.ts

@@ -0,0 +1,17 @@
+'use server';
+
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function getComponentSource(filePaths: string[] | undefined) {
+    if (!filePaths || filePaths.length === 0) return
+
+    try {
+        const fullPath = path.join(process.cwd(), filePaths[0]);
+        const source = await fs.readFile(fullPath, 'utf-8');
+        return source;
+    } catch (error) {
+        console.error('Failed to read source code:', error);
+        return
+    }
+}

package/lib/utils.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/middleware/middleware.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import jwt from 'jsonwebtoken';
+
+export function middleware(req: any) {
+  const token = req.cookies.get('access_token')?.value;
+
+  if (!token) {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+
+  try {
+    jwt.verify(token, process.env.JWT_SECRET!);
+    return NextResponse.next();
+  } catch {
+    return NextResponse.redirect(new URL('/login', req.url));
+  }
+}
+
+export const config = {
+  matcher: ['/account/:path*', '/docs/:path*', '/components/:path*'],
+};

package/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ghatak/slash-ui",
+  "version": "1.0.0",
+  "private": false,
+  "bin": {
+    "slash-ui": "./bin/index.ts"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "tsc",
+    "start": "next start",
+    "lint": "eslint",
+    "build:registry": "tsx scripts/build-registry.ts",
+    "postinstall": "prisma generate"
+  },
+  "dependencies": {
+    "@prisma/client": "^6.19.2",
+    "@tailwindcss/typography": "^0.5.19",
+    "axios": "^1.13.6",
+    "bcrypt": "^6.0.0",
+    "bcryptjs": "^3.0.3",
+    "clsx": "^2.1.1",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.4",
+    "hamburger-react": "^2.5.2",
+    "jsonwebtoken": "^9.0.3",
+    "lenis": "^1.3.18",
+    "lucide-react": "^0.563.0",
+    "motion": "^12.31.0",
+    "next": "16.1.6",
+    "nodemailer": "^8.0.1",
+    "prisma": "^6.19.2",
+    "prompts": "^2.4.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-hot-toast": "^2.6.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
+    "resend": "^6.9.3",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/bcrypt": "^6.0.0",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/fs-extra": "^11.0.4",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/node": "^20.19.37",
+    "@types/nodemailer": "^7.0.11",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/prisma/migrations/20260303172729_init/migration.sql

@@ -0,0 +1,21 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Otp" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "code" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Otp_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

package/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

package/prisma/schema.prisma

@@ -0,0 +1,22 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String   @id @default(uuid())
+  email     String   @unique
+  createdAt DateTime @default(now())
+}
+
+model Otp {
+  id        String   @id @default(uuid())
+  email     String
+  code      String
+  expiresAt DateTime
+  createdAt DateTime @default(now())
+}

package/prisma.config.ts

@@ -0,0 +1,14 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env["DATABASE_URL"]!,
+  },
+});