@forgewp/ui 0.1.8

package/README.md

@@ -0,0 +1,27 @@
+# @forgewp/registry 🧩
+
+The component library for ForgeWP themes. This package contains pre-built, WordPress-ready React components with two distinct styles.
+
+## 🎨 Styles
+
+- **`forgewp` (Default)**: The signature "Sharp Edges" look. Zero border-radius, high-contrast borders, and brutalist design.
+- **`shadcn`**: The classic, rounded-corner aesthetic of standard shadcn/ui.
+
+## 📂 Component Types
+
+1. **WordPress Core Components**: Specialized components for WordPress data (Menus, Post Loops, Pagination).
+2. **UI Components**: Standard building blocks (Buttons, Cards, Inputs) fetched and transformed from shadcn/ui.
+
+## 🚀 Installation
+
+This package is intended to be used via the ForgeWP CLI:
+
+```bash
+pnpm forgewp add [component-name]
+# Or
+pnpm forgewp add --name [component-name]
+```
+
+---
+
+Build beautiful themes, faster.

package/components/404/forgewp.tsx

@@ -0,0 +1,30 @@
+export function NotFoundPage() {
+  return (
+    <div className="relative flex min-h-[70vh] flex-col items-center justify-center bg-zinc-50 px-6 py-24 text-center overflow-hidden">
+      {/* Aesthetic grid decoration using Tailwind 4 utility */}
+      <div className="absolute inset-0 -z-10 h-full w-full bg-white [background-image:linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] [background-size:40px_40px]"></div>
+
+      <div className="relative border-4 border-zinc-900 bg-white p-8 sm:p-12 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">
+        <span className="text-xs font-bold uppercase tracking-widest text-zinc-400">
+          Error 404
+        </span>
+        <h1 className="mt-4 text-6xl font-black tracking-tighter text-zinc-900 sm:text-8xl">
+          LOST?
+        </h1>
+        <p className="mx-auto mt-6 max-w-md text-sm sm:text-lg leading-relaxed text-zinc-600">
+          The page you are looking for has been moved, deleted, or never existed in the first place.
+        </p>
+        <div className="mt-10">
+          <a
+            href="#"
+            className="inline-flex h-14 items-center justify-center border-2 border-zinc-900 bg-zinc-900 px-8 text-sm font-bold text-white transition-all hover:bg-white hover:text-zinc-900 active:translate-x-1 active:translate-y-1"
+          >
+            BACK TO HOME
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NotFoundPage;

package/components/hero-section/forgewp.tsx

@@ -0,0 +1,29 @@
+export function HeroSection() {
+  return (
+    <section className="relative bg-white py-24 px-6 md:px-12 border-b-4 border-zinc-950 selection:bg-brand selection:text-white">
+      <div className="max-w-4xl mx-auto text-center">
+        <span className="inline-block bg-zinc-950 text-white text-[10px] font-mono font-black uppercase tracking-widest px-3 py-1 mb-6 rounded-none select-none">
+          Active Framework Preview
+        </span>
+        
+        <h1 className="text-4xl md:text-6xl font-black tracking-tight text-zinc-950 mb-6 font-serif leading-none">
+          High-Performance WordPress Themes. <br className="hidden md:block"/>Designed in React.
+        </h1>
+        
+        <p className="text-base md:text-lg text-zinc-600 max-w-2xl mx-auto mb-10 leading-relaxed font-sans font-medium">
+          Build responsive, gorgeous, production-ready block themes using full source code access, hot reload previews, and custom design tokens.
+        </p>
+        
+        <div className="flex flex-wrap justify-center gap-4">
+          <button className="border-2 border-zinc-950 bg-zinc-950 text-white font-mono text-xs font-black uppercase tracking-widest px-6 py-3 hover:bg-white hover:text-zinc-950 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none">
+            Get Started
+          </button>
+          
+          <button className="border-2 border-zinc-950 bg-white text-zinc-950 font-mono text-xs font-black uppercase tracking-widest px-6 py-3 hover:bg-zinc-100 transition-all rounded-none">
+            Learn More
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/navbar/forgewp.tsx

@@ -0,0 +1,24 @@
+import { useWpTitle } from "@/.forgewp/wordpress";
+
+export function Navbar() {
+  const siteTitle = useWpTitle();
+  
+  return (
+    <header className="w-full bg-white border-b-4 border-zinc-950 py-4 px-6 md:px-12 flex items-center justify-between selection:bg-brand selection:text-white">
+      <div className="flex items-center gap-3 font-mono font-black uppercase text-lg tracking-wider text-zinc-950 select-none">
+        <span>⚡ {siteTitle}</span>
+      </div>
+      
+      <nav className="hidden md:flex items-center gap-6 font-mono text-xs font-bold uppercase tracking-wider text-zinc-600">
+        <a href="#" className="hover:text-zinc-950 transition-colors">Home</a>
+        <a href="#" className="hover:text-zinc-950 transition-colors">About</a>
+        <a href="#" className="hover:text-zinc-950 transition-colors">Services</a>
+        <a href="#" className="hover:text-zinc-950 transition-colors">Contact</a>
+      </nav>
+      
+      <button className="border-2 border-zinc-950 bg-zinc-950 text-white font-mono text-xs font-black uppercase tracking-widest px-4 py-2 hover:bg-white hover:text-zinc-950 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none">
+        Launch App
+      </button>
+    </header>
+  );
+}

package/components/pricing-table/forgewp.tsx

@@ -0,0 +1,81 @@
+export function PricingTable() {
+  const tiers = [
+    { 
+      name: "Starter", 
+      price: "$0", 
+      desc: "For hobbyists and individual developers.", 
+      features: ["1 Active Theme", "Tailwind Integration", "Standard Support"] 
+    },
+    { 
+      name: "Pro", 
+      price: "$49", 
+      desc: "For professional digital design agencies.", 
+      features: ["Unlimited Themes", "Full Gutenberg Integration", "Priority Support", "Advanced Custom Fields"], 
+      popular: true 
+    },
+    { 
+      name: "Enterprise", 
+      price: "$199", 
+      desc: "For large enterprise digital scaling.", 
+      features: ["Everything in Pro", "Dedicated Account Lead", "Custom AST Compilers", "SLA Support"] 
+    }
+  ];
+
+  return (
+    <section className="bg-zinc-50 py-24 px-6 md:px-12 border-b-4 border-zinc-950 selection:bg-brand selection:text-white">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-5xl font-black font-serif tracking-tight text-zinc-950 mb-4 leading-none">
+            Transparent Pricing Tiers
+          </h2>
+          <p className="text-zinc-600 max-w-xl mx-auto text-sm font-mono uppercase tracking-wider font-bold">
+            Choose the perfect tier to match your development and deployment scale.
+          </p>
+        </div>
+        
+        <div className="grid md:grid-cols-3 gap-8">
+          {tiers.map((tier) => (
+            <div 
+              key={tier.name}
+              className={`bg-white border-4 border-zinc-950 p-8 flex flex-col justify-between rounded-none transition-all ${
+                tier.popular ? "shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] scale-105" : "shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
+              }`}
+            >
+              <div>
+                <div className="flex justify-between items-center mb-4">
+                  <span className="font-mono font-black text-sm uppercase tracking-wider text-zinc-950">{tier.name}</span>
+                  {tier.popular && (
+                    <span className="bg-brand text-white text-[9px] font-mono px-2 py-0.5 uppercase tracking-widest font-black border-2 border-zinc-950">
+                      Popular
+                    </span>
+                  )}
+                </div>
+                
+                <div className="mb-6">
+                  <span className="text-4xl font-serif font-black text-zinc-950">{tier.price}</span>
+                  <span className="text-zinc-500 font-mono text-xs font-bold">/mo</span>
+                </div>
+                
+                <p className="text-zinc-600 text-xs mb-6 leading-relaxed font-semibold">{tier.desc}</p>
+                
+                <ul className="space-y-3 mb-8 text-xs font-bold text-zinc-700">
+                  {tier.features.map(f => (
+                    <li key={f} className="flex items-center gap-2">
+                      <span className="text-zinc-950 font-black">⚡</span> {f}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              
+              <button className={`w-full text-center border-2 border-zinc-950 py-3 font-mono text-xs font-black uppercase tracking-wider transition-all rounded-none ${
+                tier.popular ? "bg-zinc-950 text-white hover:bg-white hover:text-zinc-950" : "bg-white text-zinc-950 hover:bg-zinc-100"
+              }`}>
+                Select {tier.name}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@forgewp/ui",
+  "version": "0.1.8",
+  "description": "Component registry for ForgeWP",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "components"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3"
+  }
+}