@cyberbloxai/ui-kit 0.3.1 → 0.3.3

package/README.md

@@ -61,6 +61,9 @@ npx @cyberbloxai/ui-kit init
 npx @cyberbloxai/ui-kit add button
 npx @cyberbloxai/ui-kit add dialog
 npx @cyberbloxai/ui-kit add alert-dialog # This will also add 'button' automatically!
+
+# 3. Add all components at once
+npx @cyberbloxai/ui-kit add all
 ```
 
 **What happens during `init`?**

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Production-ready UI component library built on Radix UI + Tailwind CSS. Supports shadcn-style component installation.",
-  "bin": "./src/cli.js",
+  "bin": {
+    "ui-kit": "./src/cli.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/abhishekjohn1507/uni-kit-forge.git"

package/src/cli.js

@@ -301,7 +301,7 @@ async function init() {
   console.log('npx @cyberbloxai/ui-kit add [component-name]');
 }
 
-function addComponent(name) {
+function addComponent(name, options = { skipInstall: false }) {
   if (!name) {
     console.error('Please specify a component name.');
     process.exit(1);
@@ -318,8 +318,8 @@ function addComponent(name) {
   // Recursive add for internal dependencies
   if (registryItem && registryItem.dependencies) {
     registryItem.dependencies.forEach(dep => {
-      if (!dep.startsWith('@')) { // It's an internal component
-        addComponent(dep);
+      if (!dep.startsWith('@') && COMPONENT_REGISTRY[dep]) { // It's an internal component
+        addComponent(dep, options);
       }
     });
   }
@@ -350,12 +350,12 @@ function addComponent(name) {
   const destPath = path.join(targetDir, path.basename(finalSrcPath));
   
   if (fs.existsSync(destPath)) {
-    console.log(`  File ${path.basename(finalSrcPath)} already exists. Skipping.`);
+    // console.log(`  File ${path.basename(finalSrcPath)} already exists. Skipping.`);
   } else {
     copyFile(finalSrcPath, destPath);
     
     // Install npm dependencies
-    if (registryItem && registryItem.dependencies) {
+    if (!options.skipInstall && registryItem && registryItem.dependencies) {
       const npmDeps = registryItem.dependencies.filter(d => d.startsWith('@') || !COMPONENT_REGISTRY[d]);
       const regDeps = registryItem.registryDependencies || [];
       installDependencies([...new Set([...npmDeps, ...regDeps])]);
@@ -363,6 +363,45 @@ function addComponent(name) {
   }
 }
 
+function addAllComponents() {
+  const config = getProjectConfig();
+  if (!config) {
+    console.error('Project not initialized. Run "npx @cyberbloxai/ui-kit init" first.');
+    process.exit(1);
+  }
+
+  const components = Object.keys(COMPONENT_REGISTRY);
+  console.log(`Adding all ${components.length} components...`);
+
+  const allNpmDeps = new Set();
+
+  components.forEach(name => {
+    // Add component without installing deps yet
+    addComponent(name, { skipInstall: true });
+    
+    // Collect deps
+    const item = COMPONENT_REGISTRY[name];
+    if (item && item.dependencies) {
+      item.dependencies.forEach(d => {
+        if (d.startsWith('@') || !COMPONENT_REGISTRY[d]) {
+          allNpmDeps.add(d);
+        }
+      });
+    }
+    if (item && item.registryDependencies) {
+      item.registryDependencies.forEach(d => allNpmDeps.add(d));
+    }
+  });
+
+  // Install all unique dependencies at once
+  if (allNpmDeps.size > 0) {
+    console.log('\nInstalling all required dependencies...');
+    installDependencies([...allNpmDeps]);
+  }
+
+  console.log('\nSuccess! All components have been added.');
+}
+
 function listComponents() {
   console.log('Available components:');
   const files = fs.readdirSync(componentsSrc);
@@ -378,7 +417,11 @@ switch (command) {
     init();
     break;
   case 'add':
-    addComponent(args[1]);
+    if (args[1] === 'all') {
+      addAllComponents();
+    } else {
+      addComponent(args[1]);
+    }
     break;
   case 'list':
     listComponents();
@@ -391,6 +434,7 @@ switch (command) {
     console.log('\nUsage:');
     console.log('  npx @cyberbloxai/ui-kit init         - Setup components.json and utils');
     console.log('  npx @cyberbloxai/ui-kit add [name]   - Add a component');
+    console.log('  npx @cyberbloxai/ui-kit add all      - Add all available components');
     console.log('  npx @cyberbloxai/ui-kit list         - List components');
     break;
 }

package/src/data/componentRegistry.ts

@@ -23,9 +23,9 @@ export const componentRegistry: ComponentDoc[] = [
     name: "Button",
     description: "A versatile button component with multiple variants, sizes, and loading states. Supports rendering as a child element via the asChild prop.",
     category: "Actions",
-    variants: ["default", "destructive", "outline", "secondary", "ghost", "link"],
+    variants: ["default", "destructive", "outline", "secondary", "ghost", "link", "shiny"],
     props: [
-      { name: "variant", type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"', default: '"default"', description: "Visual style variant of the button." },
+      { name: "variant", type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "shiny"', default: '"default"', description: "Visual style variant of the button." },
       { name: "size", type: '"default" | "sm" | "lg" | "icon"', default: '"default"', description: "Controls the button dimensions." },
       { name: "asChild", type: "boolean", default: "false", description: "Merges props onto a child element instead of rendering a <button>." },
       { name: "disabled", type: "boolean", default: "false", description: "Disables the button and reduces opacity." },
@@ -41,6 +41,7 @@ import { Loader2, ArrowRight } from "lucide-react";
 <Button variant="destructive">Destructive</Button>
 <Button variant="ghost">Ghost</Button>
 <Button variant="link">Link</Button>
+<Button variant="shiny">Shiny</Button>
 
 // Sizes
 <Button size="sm">Small</Button>
@@ -90,9 +91,9 @@ import { Label } from "@/components/ui/label";
     name: "Badge",
     description: "A small label component for status indicators, tags, and categories. Renders as a styled div with rounded-full corners.",
     category: "Data Display",
-    variants: ["default", "secondary", "destructive", "outline"],
+    variants: ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
     props: [
-      { name: "variant", type: '"default" | "secondary" | "destructive" | "outline"', default: '"default"', description: "Visual style of the badge." },
+      { name: "variant", type: '"default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info"', default: '"default"', description: "Visual style of the badge." },
       { name: "className", type: "string", description: "Additional CSS classes to merge." },
     ],
     codeExample: `import { Badge } from "@/components/ui/badge";
@@ -101,6 +102,9 @@ import { Label } from "@/components/ui/label";
 <Badge variant="secondary">Beta</Badge>
 <Badge variant="destructive">Critical</Badge>
 <Badge variant="outline">Stable</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="info">Info</Badge>
 
 // Custom colored
 <Badge className="bg-primary/20 text-primary border-0">Custom</Badge>`,

package/src/pages/ComponentDetail.tsx

@@ -41,7 +41,7 @@ const ComponentDetail = () => {
           <div className="flex items-center gap-3">
             <Link to="/" className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
               <Package className="h-5 w-5 text-primary" />
-              <span className="font-bold text-foreground">UIKit</span>
+              <span className="font-bold text-foreground">CyberBlox UI</span>
             </Link>
             <span className="text-border">/</span>
             <Link to="/components" className="text-sm text-muted-foreground hover:text-foreground transition-colors">

package/src/pages/Index.tsx

@@ -33,7 +33,7 @@ const Index = () => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
-    navigator.clipboard.writeText("npx create-ui-kit@latest");
+    navigator.clipboard.writeText("npx @cyberbloxai/ui-kit init");
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
@@ -61,7 +61,7 @@ const Index = () => {
           <div className="flex items-center gap-2">
             <Package className="h-6 w-6 text-primary" />
             <span className="font-bold text-lg text-foreground">CyberBlox UI</span>
-            <span className="text-xs font-mono text-primary bg-primary/10 px-2 py-0.5 rounded-full">v0.3.0</span>
+            <span className="text-xs font-mono text-primary bg-primary/10 px-2 py-0.5 rounded-full">v0.3.2</span>
           </div>
           <div className="flex items-center gap-3">
             <Link to="/components">
@@ -110,7 +110,7 @@ const Index = () => {
                 onClick={handleCopy}
                 className="flex items-center gap-2 bg-muted/50 border border-border/60 rounded-lg px-4 py-2.5 font-mono text-sm text-muted-foreground hover:border-primary/30 hover:text-foreground transition-all"
               >
-                <span>npx create-ui-kit@latest</span>
+                <span>npx @cyberbloxai/ui-kit init</span>
                 {copied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
               </button>
             </div>
@@ -170,6 +170,35 @@ const Index = () => {
         </motion.div>
       </section>
 
+      {/* CLI Commands */}
+      <section className="max-w-6xl mx-auto px-6 pb-24">
+        <div className="glass-card p-8 border-primary/20 bg-primary/5">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+            <div className="space-y-4 text-center md:text-left">
+              <h2 className="text-2xl font-bold text-foreground">Fast Installation</h2>
+              <p className="text-muted-foreground max-w-md">
+                Copy individual components or add the entire library at once with our CLI.
+                All dependencies are handled automatically.
+              </p>
+            </div>
+            <div className="w-full md:w-auto space-y-3">
+              <div className="flex items-center justify-between bg-background/80 border border-border/60 rounded-lg px-4 py-3 font-mono text-sm group">
+                <span className="text-primary">npx @cyberbloxai/ui-kit init</span>
+                <button onClick={() => { navigator.clipboard.writeText("npx @cyberbloxai/ui-kit init"); }} className="opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Copy className="h-4 w-4 text-muted-foreground hover:text-foreground" />
+                </button>
+              </div>
+              <div className="flex items-center justify-between bg-background/80 border border-border/60 rounded-lg px-4 py-3 font-mono text-sm group">
+                <span className="text-primary">npx @cyberbloxai/ui-kit add all</span>
+                <button onClick={() => { navigator.clipboard.writeText("npx @cyberbloxai/ui-kit add all"); }} className="opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Copy className="h-4 w-4 text-muted-foreground hover:text-foreground" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Features Grid */}
       <section className="max-w-6xl mx-auto px-6 pb-24">
         <div className="text-center mb-12">
@@ -206,7 +235,7 @@ const Index = () => {
         <div className="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
           <div className="flex items-center gap-2">
             <Package className="h-4 w-4 text-primary" />
-            <span className="text-sm font-medium text-foreground">UIKit</span>
+            <span className="text-sm font-medium text-foreground">CyberBlox UI</span>
             <span className="text-xs text-muted-foreground">© 2026</span>
           </div>
           <div className="flex items-center gap-4 text-sm text-muted-foreground">