@ghatak/slash-ui 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghatak/slash-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",
   "private": false,
@@ -8,11 +8,11 @@
     "access": "public"
   },
   "bin": {
-    "slash-ui": "./dist/bin/init.js"
+    "slash-ui": "./dist/bin/index.js"
   },
   "files": [
-    "dist",
-    "__registry__"
+    "dist"
+    
   ],
   "scripts": {
     "dev": "next dev",

package/__registry__/index.ts

@@ -1,493 +0,0 @@
-// @ts-nocheck
-// This file is autogenerated by scripts/build-registry.ts
-import * as React from "react"
-
-export const Index: Record<string, any> = {
-  "default": {
-    "neubrutal-button": {
-      name: "neubrutal-button",
-      type: "ui",
-      component: React.lazy(() => import("../registry/ui/buttons/neubrutal-button")),
-      details: null,
-      files: ["ui/buttons/neubrutal-button.tsx"],
-      category: "buttons",
-      content: `import React from 'react';
-import { cn } from '@/lib/utils';
-
-interface NeubrutalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-}
-
-// 1. CHANGE THIS TO DEFAULT EXPORT
-export default function NeubrutalButton({
-  children = 'Click Me!',
-  className,
-  ...props
-}: NeubrutalButtonProps) {
-  return (
-    <button
-      {...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,
-      )}
-    >
-      <div className='absolute top-[14px] -left-[1px] w-[calc(100%+2px)] h-full bg-[#8c8c8c] rounded-[7mm] outline outline-2 outline-[#242622] -z-10' />
-      <div className='absolute top-[10px] left-0 w-full h-full bg-[#e5e5c7] rounded-[7mm] outline outline-2 outline-[#242622] -z-10'>
-        <div className='absolute bottom-0 left-[15%] w-[2px] h-[9px] bg-[#242622]' />
-        <div className='absolute bottom-0 left-[85%] w-[2px] h-[9px] bg-[#242622]' />
-      </div>
-      <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]'>
-        <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}
-      </div>
-    </button>
-  );
-}
-`,
-      description: ``,
-      install: "npm install framer-motion lucide-react",
-    },
-    "dot-cursor": {
-      name: "dot-cursor",
-      type: "ui",
-      component: React.lazy(() => import("../registry/ui/cursors/dot-cursor")),
-      details: null,
-      files: ["ui/cursors/dot-cursor.tsx"],
-      category: "cursors",
-      content: `'use client';
-
-import React, { 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: MouseEvent) => {
-      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: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      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: string) => {
-    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 (
-    <div 
-    style={{ 
-      cursor: 'none', 
-      width: '100vw', 
-      height: '100vh', 
-      position: 'fixed', 
-      top: 0, 
-      left: 0, 
-      pointerEvents: 'none' 
-    }}>
-    
-    <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,
-      }}
-    >
-      <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',
-        }}
-      >
-        <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"
-        />
-      </svg>
-    </div>
-    </div>
-  );
-};
-
-export default CustomCursor;`,
-      description: ``,
-      install: "npm install framer-motion",
-    },
-    "flaoting-navbar": {
-      name: "flaoting-navbar",
-      type: "ui",
-      component: React.lazy(() => import("../registry/ui/navbars/floating-navbar")),
-      details: null,
-      files: ["ui/navbars/floating-navbar.tsx"],
-      category: "navbars",
-      content: `'use client';
-
-import React, { 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 (
-    <nav className='fixed top-0 left-0 w-full z-[100] flex justify-center pt-6 px-6 pointer-events-none mt-10'>
-      <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'
-          }
-        \`}
-      >
-        <Link href='/' className='group flex items-center'>
-          <span className=' text-3xl uppercase tracking-wide font-bold'>
-            Renoh
-          </span>
-        </Link>
-
-        <div className='hidden md:flex items-center space-x-8'>
-          {navLinks.map((link) => (
-            <Link
-              key={link.slug}
-              href={\`/\${link.slug}\`}
-              className='text-[10px]  font-plex uppercase tracking-[0.2em] text-zinc-400 hover:text-white transition-colors relative group'
-            >
-              {link.name}
-              <span className='absolute -bottom-1 left-0 w-0 h-px bg-white transition-all duration-500 group-hover:w-full' />
-            </Link>
-          ))}
-        </div>
-
-        <div className='flex items-center space-x-4'>
-          <button
-            onClick={toggleTheme}
-            className='p-2 hover:bg-white/10 rounded-full transition-colors text-white'
-          >
-            <AnimatePresence mode='wait'>
-              <motion.div
-                key={isDark ? 'dark' : 'light'}
-                initial={{ opacity: 0, rotate: -90 }}
-                animate={{ opacity: 1, rotate: 0 }}
-                exit={{ opacity: 0, rotate: 90 }}
-                transition={{ duration: 0.2 }}
-              >
-                {isDark ? <Sun size={16} /> : <Moon size={16} />}
-              </motion.div>
-            </AnimatePresence>
-          </button>
-
-          <Link href='/contact'>
-            <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'
-            >
-              Inquire
-            </motion.div>
-          </Link>
-        </div>
-      </motion.div>
-    </nav>
-  );
-};
-
-export default Navbar;
-`,
-      description: ``,
-      install: "npm install lucide-react framer-motion gsap",
-    },
-    "minimal-scrollbar": {
-      name: "minimal-scrollbar",
-      type: "ui",
-      component: React.lazy(() => import("../registry/ui/scrollbars/minimal-scrollbar")),
-      details: null,
-      files: ["ui/scrollbars/minimal-scrollbar.tsx"],
-      category: "scrollbars",
-      content: `'use client';
-
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { usePathname } from 'next/navigation';
-
-const VisualScrollbar = () => {
-  const [thumbTop, setThumbTop] = useState(0);
-  const channelRef = useRef<HTMLDivElement>(null);
-  const thumbRef = useRef<HTMLDivElement>(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: ReturnType<typeof setTimeout> | null = 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 (
-    <>
-      <style>{\`
-        :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;
-          }
-        }
-      \`}</style>
-
-      {/* Visual Scrollbar */}
-      <div className='vs'>
-        <div className='vs__channel' ref={channelRef}>
-          <div
-            className='vs__thumb'
-            ref={thumbRef}
-            style={{ top: \`\${thumbTop}px\` }}
-            aria-hidden='true'
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default VisualScrollbar;`,
-      description: ``,
-      install: "",
-    },
-  }
-};