slashh-ui 1.3.2

package/dist/registry/index.js

@@ -0,0 +1,31 @@
+// registry/index.ts
+export const Index = [
+    {
+        name: 'neubrutal-button',
+        type: 'ui',
+        files: ['ui/buttons/neubrutal-button.tsx'],
+        category: 'buttons',
+        install: 'npm install framer-motion lucide-react',
+    },
+    {
+        name: 'dot-cursor',
+        type: 'ui',
+        files: ['ui/cursors/dot-cursor.tsx'],
+        category: 'cursors',
+        install: 'npm install framer-motion',
+    },
+    {
+        name: 'flaoting-navbar',
+        type: 'ui',
+        files: ['ui/navbars/floating-navbar.tsx'],
+        category: 'navbars',
+        install: 'npm install lucide-react framer-motion gsap',
+    },
+    {
+        name: 'minimal-scrollbar',
+        type: 'ui',
+        files: ['ui/scrollbars/minimal-scrollbar.tsx'],
+        category: 'scrollbars',
+        install: '',
+    }
+];

package/dist/registry/ui/buttons/neubrutal-button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface NeubrutalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+export default function NeubrutalButton({ children, className, ...props }: NeubrutalButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/registry/ui/buttons/neubrutal-button.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+// 1. CHANGE THIS TO DEFAULT EXPORT
+export default function NeubrutalButton(_a) {
+    var { children = 'Click Me!', className } = _a, props = __rest(_a, ["children", "className"]);
+    return (_jsxs("button", Object.assign({}, props, { className: cn('group relative w-[140px] h-[50px] bg-none outline-none border-none p-0 cursor-pointer active:translate-y-[2px] transition-transform', className), children: [_jsx("div", { className: 'absolute top-[14px] -left-[1px] w-[calc(100%+2px)] h-full bg-[#8c8c8c] rounded-[7mm] outline outline-2 outline-[#242622] -z-10' }), _jsxs("div", { className: 'absolute top-[10px] left-0 w-full h-full bg-[#e5e5c7] rounded-[7mm] outline outline-2 outline-[#242622] -z-10', children: [_jsx("div", { className: 'absolute bottom-0 left-[15%] w-[2px] h-[9px] bg-[#242622]' }), _jsx("div", { className: 'absolute bottom-0 left-[85%] w-[2px] h-[9px] bg-[#242622]' })] }), _jsxs("div", { className: 'relative w-full h-full flex items-center justify-center bg-[#ffffee] rounded-[7mm] outline outline-2 outline-[#242622] text-[#242622] font-semibold text-base overflow-hidden transition-all duration-200 group-active:translate-y-[10px]', children: [_jsx("div", { className: 'absolute top-0 -left-[20px] w-[15px] h-full bg-black/10 skew-x-[30deg] transition-all duration-300 group-active:left-[calc(100%+20px)]' }), children] })] })));
+}

package/dist/registry/ui/cursors/dot-cursor.d.ts

@@ -0,0 +1,2 @@
+declare const CustomCursor: () => import("react/jsx-runtime").JSX.Element;
+export default CustomCursor;

package/dist/registry/ui/cursors/dot-cursor.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+const CustomCursor = () => {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isHovering, setIsHovering] = useState(false);
+    const [isDarkBackground, setIsDarkBackground] = useState(false);
+    useEffect(() => {
+        // document.body.style.cursor = 'none';
+        const updatePosition = (e) => {
+            setPosition({ x: e.clientX, y: e.clientY });
+            const element = document.elementFromPoint(e.clientX, e.clientY);
+            if (element) {
+                const bgColor = window.getComputedStyle(element).backgroundColor;
+                const brightness = getBrightness(bgColor);
+                setIsDarkBackground(brightness < 128);
+            }
+        };
+        const handleMouseOver = (e) => {
+            const target = e.target;
+            if (target.tagName === 'A' ||
+                target.tagName === 'BUTTON' ||
+                target.onclick !== null ||
+                window.getComputedStyle(target).cursor === 'pointer') {
+                setIsHovering(true);
+            }
+        };
+        const handleMouseOut = () => {
+            setIsHovering(false);
+        };
+        window.addEventListener('mousemove', updatePosition);
+        document.addEventListener('mouseover', handleMouseOver);
+        document.addEventListener('mouseout', handleMouseOut);
+        return () => {
+            window.removeEventListener('mousemove', updatePosition);
+            document.removeEventListener('mouseover', handleMouseOver);
+            document.removeEventListener('mouseout', handleMouseOut);
+        };
+    }, []);
+    const getBrightness = (color) => {
+        const rgb = color.match(/\d+/g);
+        if (!rgb)
+            return 255;
+        const r = parseInt(rgb[0]);
+        const g = parseInt(rgb[1]);
+        const b = parseInt(rgb[2]);
+        return (r * 299 + g * 587 + b * 114) / 1000;
+    };
+    return (_jsx("div", { style: {
+            cursor: 'none',
+            width: '100vw',
+            height: '100vh',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none'
+        }, children: _jsx("div", { style: {
+                position: 'fixed',
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                pointerEvents: 'none',
+                transform: `translate(-50%, -50%) scale(${isHovering ? 1.5 : 1})`,
+                transition: 'transform 0.2s ease',
+                zIndex: 9999,
+            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", style: {
+                    display: 'block',
+                    transition: 'all 0.2s ease',
+                }, children: _jsx("path", { fill: isDarkBackground ? '#ffffff' : '#000000', stroke: isDarkBackground ? '#000000' : '#ffffff', strokeWidth: "2", d: "M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z" }) }) }) }));
+};
+export default CustomCursor;

package/dist/registry/ui/navbars/floating-navbar.d.ts

@@ -0,0 +1,2 @@
+declare const Navbar: () => import("react/jsx-runtime").JSX.Element | null;
+export default Navbar;

package/dist/registry/ui/navbars/floating-navbar.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sun, Moon } from 'lucide-react';
+const Navbar = () => {
+    const [mounted, setMounted] = useState(false);
+    const [isDark, setIsDark] = useState(true);
+    const [scrolled, setScrolled] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+        const handleScroll = () => setScrolled(window.scrollY > 20);
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+    const toggleTheme = () => {
+        setIsDark(!isDark);
+        document.documentElement.classList.toggle('dark');
+    };
+    const navLinks = [
+        { name: 'Archives', slug: 'work' },
+        { name: 'Capabilities', slug: 'service' },
+        { name: 'Ethos', slug: 'about' },
+    ];
+    if (!mounted)
+        return null;
+    return (_jsx("nav", { className: 'fixed top-0 left-0 w-full z-[100] flex justify-center pt-6 px-6 pointer-events-none mt-10', children: _jsxs(motion.div, { initial: { y: -100 }, animate: { y: 0 }, className: `
+          flex items-center justify-between px-6 transition-all duration-500 pointer-events-auto
+          ${scrolled
+                ? 'w-full md:w-[800px] h-14 bg-white/5 backdrop-blur-md border border-white/10 rounded-full shadow-2xl'
+                : 'w-full h-20 bg-transparent border-transparent'}
+        `, children: [_jsx(Link, { href: '/', className: 'group flex items-center', children: _jsx("span", { className: ' text-3xl uppercase tracking-wide font-bold', children: "Renoh" }) }), _jsx("div", { className: 'hidden md:flex items-center space-x-8', children: navLinks.map((link) => (_jsxs(Link, { href: `/${link.slug}`, className: 'text-[10px]  font-plex uppercase tracking-[0.2em] text-zinc-400 hover:text-white transition-colors relative group', children: [link.name, _jsx("span", { className: 'absolute -bottom-1 left-0 w-0 h-px bg-white transition-all duration-500 group-hover:w-full' })] }, link.slug))) }), _jsxs("div", { className: 'flex items-center space-x-4', children: [_jsx("button", { onClick: toggleTheme, className: 'p-2 hover:bg-white/10 rounded-full transition-colors text-white', children: _jsx(AnimatePresence, { mode: 'wait', children: _jsx(motion.div, { initial: { opacity: 0, rotate: -90 }, animate: { opacity: 1, rotate: 0 }, exit: { opacity: 0, rotate: 90 }, transition: { duration: 0.2 }, children: isDark ? _jsx(Sun, { size: 16 }) : _jsx(Moon, { size: 16 }) }, isDark ? 'dark' : 'light') }) }), _jsx(Link, { href: '/contact', children: _jsx(motion.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, className: 'px-4 py-2 bg-white text-black text-[10px] font-plex uppercase tracking-widest rounded-full', children: "Inquire" }) })] })] }) }));
+};
+export default Navbar;

package/dist/registry/ui/scrollbars/minimal-scrollbar.d.ts

@@ -0,0 +1,2 @@
+declare const VisualScrollbar: () => import("react/jsx-runtime").JSX.Element | null;
+export default VisualScrollbar;

package/dist/registry/ui/scrollbars/minimal-scrollbar.js

@@ -0,0 +1,171 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+const VisualScrollbar = () => {
+    const [thumbTop, setThumbTop] = useState(0);
+    const channelRef = useRef(null);
+    const thumbRef = useRef(null);
+    const tickingRef = useRef(false);
+    const measurementsRef = useRef({
+        height: 0,
+        thumbH: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        available: 0,
+    });
+    // Hide scrollbar on contact page
+    const pathname = usePathname();
+    const shouldHide = pathname === '/contact';
+    const measure = useCallback(() => {
+        if (!channelRef.current || !thumbRef.current)
+            return;
+        const chRect = channelRef.current.getBoundingClientRect();
+        const thumbRect = thumbRef.current.getBoundingClientRect();
+        const style = window.getComputedStyle(channelRef.current);
+        const height = chRect.height;
+        const thumbH = thumbRect.height;
+        const paddingTop = parseFloat(style.paddingTop) || 0;
+        const paddingBottom = parseFloat(style.paddingBottom) || 0;
+        const available = Math.max(height - thumbH - (paddingTop + paddingBottom), 0);
+        measurementsRef.current = {
+            height,
+            thumbH,
+            paddingTop,
+            paddingBottom,
+            available,
+        };
+    }, []);
+    const updateThumb = useCallback(() => {
+        const scrollTop = window.scrollY;
+        const scrollHeight = document.documentElement.scrollHeight;
+        const clientHeight = document.documentElement.clientHeight;
+        const maxScroll = Math.max(scrollHeight - clientHeight, 1);
+        const scrollPercent = Math.min(Math.max(scrollTop / maxScroll, 0), 1);
+        const topPx = measurementsRef.current.paddingTop +
+            scrollPercent * measurementsRef.current.available;
+        setThumbTop(topPx);
+    }, []);
+    useEffect(() => {
+        const handleScroll = () => {
+            if (!tickingRef.current) {
+                tickingRef.current = true;
+                requestAnimationFrame(() => {
+                    updateThumb();
+                    tickingRef.current = false;
+                });
+            }
+        };
+        let resizeTimeout = null;
+        const handleResize = () => {
+            if (resizeTimeout)
+                clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                measure();
+                updateThumb();
+            }, 150);
+        };
+        // Initial setup with small delay to ensure DOM is ready
+        const initTimeout = setTimeout(() => {
+            measure();
+            updateThumb();
+        }, 100);
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', handleResize, { passive: true });
+        return () => {
+            clearTimeout(initTimeout);
+            if (resizeTimeout)
+                clearTimeout(resizeTimeout);
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [measure, updateThumb]);
+    // Return null if on contact page
+    if (shouldHide)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        :root {
+          --left-offset: 20px;
+          --track-h: 50vh;
+          --track-w: 3px;
+          --thumb-w: 2px;
+          --thumb-h: 50px;
+          --track-bg: #212121;
+          --channel-bg: rgba(255,255,255,0.15);
+          --thumb-gradient: linear-gradient(180deg,#ffffff,#d7d7d7);
+          --track-radius: 0px;
+          --thumb-radius: 0px;
+          --transition-speed: 1ms;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        body {
+          background: #0a0a0a;
+          color: #e6e6e6;
+          margin: 0;
+          padding: 0;
+        }
+
+        .vs {
+          position: fixed;
+          left: var(--left-offset);
+          top: 50%;
+          transform: translateY(-50%);
+          width: var(--track-w);
+          height: var(--track-h);
+          background: var(--track-bg);
+          border-radius: var(--track-radius);
+          overflow: hidden;
+          box-shadow:
+            inset 0 1px 0 rgba(255,255,255,0.08),
+            0 10px 24px rgba(0,0,0,0.6);
+          backdrop-filter: blur(6px);
+          pointer-events: none;
+          z-index: 9999;
+          display: flex;
+          justify-content: center;
+          will-change: transform;
+        }
+
+        .vs__channel {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: var(--channel-bg);
+          border-radius: var(--track-radius);
+          overflow: hidden;
+        }
+
+        .vs__thumb {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateZ(0);
+          width: var(--thumb-w);
+          height: var(--thumb-h);
+          border-radius: var(--thumb-radius);
+          background: var(--thumb-gradient);
+          box-shadow:
+            0 4px 14px rgba(0,0,0,0.6),
+            inset 0 1px 0 rgba(255,255,255,0.4);
+          will-change: top;
+        }
+
+        .vs:hover .vs__thumb {
+          transform: translateX(-50%) translateZ(0) scaleY(1.05);
+          transition: transform 180ms ease;
+        }
+
+        @media (max-width:720px) {
+          :root {
+            --left-offset: 10px;
+            --thumb-h: 30px;
+            --track-w: 3px;
+            --track-h: 30vh;
+          }
+        }
+      ` }), _jsx("div", { className: 'vs', children: _jsx("div", { className: 'vs__channel', ref: channelRef, children: _jsx("div", { className: 'vs__thumb', ref: thumbRef, style: { top: `${thumbTop}px` }, "aria-hidden": 'true' }) }) })] }));
+};
+export default VisualScrollbar;

package/dist/scripts/build-registry.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scripts/build-registry.js

@@ -0,0 +1,47 @@
+import { writeFileSync, existsSync, mkdirSync, readFileSync } from 'fs';
+import path from 'path';
+import { Index } from '../registry/index';
+const OUTPUT_DIR = path.join(process.cwd(), '__registry__');
+const OUTPUT_PATH = path.join(OUTPUT_DIR, 'index.ts');
+async function buildRegistry() {
+    if (!existsSync(OUTPUT_DIR)) {
+        mkdirSync(OUTPUT_DIR);
+    }
+    let indexContent = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+import * as React from "react"
+
+export const Index: Record<string, any> = {
+  "default": {
+`;
+    Index.forEach((item) => {
+        const componentPath = item.files[0].replace(/\.tsx?$/, '');
+        const sourceFilePath = path.join(process.cwd(), 'registry', item.files[0]);
+        const detailsFilePath = path.join(process.cwd(), 'registry', `details/${item.name}.tsx`);
+        const hasDetails = existsSync(detailsFilePath);
+        const rawContent = existsSync(sourceFilePath)
+            ? readFileSync(sourceFilePath, 'utf8')
+            : '';
+        const safeContent = rawContent.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        const safeDescription = (item.description || '')
+            .replace(/`/g, '\\`')
+            .replace(/\$/g, '\\$');
+        indexContent += `    "${item.name}": {
+      name: "${item.name}",
+      type: "${item.type}",
+      component: React.lazy(() => import("../registry/${componentPath}")),
+      details: ${hasDetails ? `React.lazy(() => import("../registry/details/${item.name}"))` : 'null'},
+      files: ${JSON.stringify(item.files)},
+      category: "${item.category || 'undefined'}",
+      content: \`${safeContent}\`,
+      description: \`${safeDescription}\`,
+      install: "${item.install || ''}",
+    },
+`;
+    });
+    indexContent += `  }
+};`;
+    writeFileSync(OUTPUT_PATH, indexContent);
+    console.log('✅ Slash UI Registry updated!');
+}
+buildRegistry();

package/dist/src/commands/add.d.ts

@@ -0,0 +1 @@
+export declare const addCommand: (componentName: string) => Promise<void>;

package/dist/src/commands/add.js

@@ -0,0 +1,64 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import prompts from "prompts";
+import { execSync } from "child_process";
+// Import the Index that YOUR script just generated
+import { Index } from "../../__registry__/index.js";
+/**
+ * Helper to check and install missing peer dependencies
+ */
+async function installMissingDeps(dependenciesString) {
+    try {
+        const packageJsonPath = path.join(process.cwd(), "package.json");
+        if (!await fs.pathExists(packageJsonPath))
+            return;
+        const packageJson = await fs.readJSON(packageJsonPath);
+        const allDeps = Object.assign(Object.assign({}, packageJson.dependencies), packageJson.devDependencies);
+        // Split the space-separated string from your registry (e.g., "framer-motion lucide-react")
+        const requiredDeps = dependenciesString.split(" ");
+        const missing = requiredDeps.filter(dep => !allDeps[dep]);
+        if (missing.length > 0) {
+            console.log(chalk.yellow(`\nMissing dependencies: ${chalk.bold(missing.join(", "))}`));
+            const { confirm } = await prompts({
+                type: "confirm",
+                name: "confirm",
+                message: "Would you like to install them now?",
+                initial: true
+            });
+            if (confirm) {
+                console.log(chalk.cyan("Installing..."));
+                // 'stdio: inherit' lets the user see the npm progress bar
+                execSync(`npm install ${missing.join(" ")}`, { stdio: "inherit" });
+                console.log(chalk.green("Dependencies installed.\n"));
+            }
+        }
+    }
+    catch (error) {
+        console.error(chalk.red("Could not check/install dependencies:"), error);
+    }
+}
+export const addCommand = async (componentName) => {
+    try {
+        const component = Index.default[componentName];
+        if (!component) {
+            console.error(chalk.red(`\nError: Component "${componentName}" not found in registry.`));
+            return;
+        }
+        const targetDir = path.join(process.cwd(), "components", "ui");
+        await fs.ensureDir(targetDir);
+        const fileName = component.files[0] ? path.basename(component.files[0]) : `${componentName}.tsx`;
+        const filePath = path.join(targetDir, fileName);
+        await fs.writeFile(filePath, component.content);
+        // --- Premium Success Message ---
+        console.log(`\n${chalk.bgCyan.black(" DONE ")} ${chalk.green(`Component ${chalk.bold(componentName)} has been added.`)}`);
+        console.log(`${chalk.dim("Location:")} ${chalk.cyan(filePath)}`);
+        // --- Automated Dependency Check ---
+        if (component.install) {
+            await installMissingDeps(component.install);
+        }
+    }
+    catch (error) {
+        console.error(chalk.red("\nFailed to add component:"), error);
+    }
+};

package/dist/src/commands/init.d.ts

@@ -0,0 +1 @@
+export declare const initCommand: () => Promise<void>;

package/dist/src/commands/init.js

@@ -0,0 +1,88 @@
+import fs from 'fs-extra';
+import path from 'path';
+import chalk from 'chalk';
+import prompts from 'prompts';
+export const initCommand = async () => {
+    try {
+        console.log(chalk.bold.blue('\n🚀 Initializing Slash UI...\n'));
+        const response = await prompts([
+            {
+                type: 'text',
+                name: 'componentsPath',
+                message: 'Where would you like to install your components?',
+                initial: 'components/ui',
+            },
+            {
+                type: 'confirm',
+                name: 'proceed',
+                message: 'This will create directories and neubrutal configurations. Proceed?',
+                initial: true,
+            },
+        ]);
+        if (!response.proceed) {
+            console.log(chalk.yellow('Aborted initialization.'));
+            return;
+        }
+        // 1. Create Directories
+        const targetDir = path.join(process.cwd(), response.componentsPath);
+        const utilsDir = path.join(process.cwd(), "lib");
+        await fs.ensureDir(targetDir);
+        await fs.ensureDir(utilsDir);
+        console.log(chalk.green(`✔ Created directories.`));
+        // 2. Create lib/utils.ts (CRITICAL for your components)
+        const utilsContent = `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(utilsDir, "utils.ts"), utilsContent);
+        console.log(chalk.green('✔ Created lib/utils.ts'));
+        // 3. Create components.json
+        const config = {
+            style: 'default',
+            tailwind: {
+                config: 'tailwind.config.ts',
+                css: 'app/globals.css',
+                baseColor: 'zinc',
+            },
+            paths: {
+                components: response.componentsPath,
+                utils: 'lib/utils',
+            },
+        };
+        await fs.writeJSON(path.join(process.cwd(), 'components.json'), config, { spaces: 2 });
+        console.log(chalk.green('✔ Created components.json'));
+        // 4. Advanced Tailwind Config Injection
+        const tailwindConfigPath = path.join(process.cwd(), 'tailwind.config.ts');
+        if (fs.existsSync(tailwindConfigPath)) {
+            let content = fs.readFileSync(tailwindConfigPath, 'utf-8');
+            // Add Neubrutal Theme extensions if they don't exist
+            if (!content.includes('boxShadow')) {
+                const neubrutalTheme = `
+      extend: {
+        boxShadow: {
+          'neubrutal': '4px 4px 0px 0px rgba(0,0,0,1)',
+          'neubrutal-lg': '8px 8px 0px 0px rgba(0,0,0,1)',
+        },
+        borderWidth: {
+          '3': '3px',
+        },
+      },`;
+                // This is a simple regex to inject into the theme object
+                content = content.replace(/theme: \{([\s\S]*?)(\s*)\}/, `theme: {$1 ${neubrutalTheme}$2}`);
+            }
+            // Add the content path
+            if (!content.includes(response.componentsPath)) {
+                content = content.replace(/content: \[([\s\S]*?)\]/, `content: [$1, "./${response.componentsPath}/**/*.{ts,tsx}"]`);
+            }
+            fs.writeFileSync(tailwindConfigPath, content);
+            console.log(chalk.dim('✔ Injected neubrutal theme into tailwind.config.ts'));
+        }
+        console.log(chalk.bgCyan.black("\n SUCCESS ") + " Project initialized. Ready to add components!");
+    }
+    catch (error) {
+        console.error(chalk.red('\nFailed to initialize project:'), error);
+    }
+};

package/dist/src/commands/list.d.ts

@@ -0,0 +1 @@
+export declare const listCommand: () => Promise<void>;

package/dist/src/commands/list.js

@@ -0,0 +1,37 @@
+import chalk from "chalk";
+import prompts from "prompts";
+import { Index } from "../../__registry__/index.js";
+import { addCommand } from "./add.js";
+export const listCommand = async () => {
+    try {
+        const registryData = Index.default;
+        const components = Object.keys(registryData);
+        if (components.length === 0) {
+            console.log(chalk.red("\n✖ No components found. Run 'npm run build:registry' first."));
+            return;
+        }
+        // 1. Create the interactive menu choices
+        const choices = components.map((name) => ({
+            title: name,
+            value: name,
+            description: chalk.dim(registryData[name].category || "ui"),
+        }));
+        console.log(chalk.bold.cyan("\n─── Slash UI Explorer ───"));
+        // 2. Launch the autocomplete search menu
+        const response = await prompts({
+            type: "autocomplete",
+            name: "selected",
+            message: "Search components",
+            choices: choices,
+            // This allows filtering as you type
+            suggest: (input, choices) => Promise.resolve(choices.filter(i => i.title.toLowerCase().includes(input.toLowerCase()))),
+        });
+        // 3. If they select one, run the add command immediately
+        if (response.selected) {
+            await addCommand(response.selected);
+        }
+    }
+    catch (error) {
+        console.error(chalk.red("\nFailed to display component list:"), error);
+    }
+};

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/src/index.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { addCommand } from './commands/add.js';
+import { initCommand } from './commands/init.js';
+import { listCommand } from './commands/list.js';
+const program = new Command();
+program
+    .name('slash-ui')
+    .description('CLI for Slash UI components')
+    .version('1.0.0');
+// 1. Init
+program
+    .command('init')
+    .description('Initialize your project for Slash UI')
+    .action(initCommand);
+// 2. List
+program
+    .command('list')
+    .description('List all available components')
+    .action(listCommand);
+// 3. Add
+program
+    .command('add')
+    .description('Add a component to your project')
+    .argument('<component>', 'the component name to add')
+    .action(addCommand);
+// ONLY ONE PARSE CALL AT THE VERY END
+program.parse();

package/dist/src/utils/get-pkg-manager.d.ts

@@ -0,0 +1 @@
+export declare function getPkgManager(): "yarn" | "pnpm" | "bun" | "npm";

package/dist/src/utils/get-pkg-manager.js

@@ -0,0 +1,10 @@
+export function getPkgManager() {
+    const userAgent = process.env.npm_config_user_agent || "";
+    if (userAgent.includes("yarn"))
+        return "yarn";
+    if (userAgent.includes("pnpm"))
+        return "pnpm";
+    if (userAgent.includes("bun"))
+        return "bun";
+    return "npm";
+}