@ghatak/slash-ui 1.0.1 → 1.0.4

package/dist/.next/dev/types/validator.d.ts

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

package/dist/.next/dev/types/validator.js

@@ -0,0 +1,44 @@
+// This file is generated automatically by Next.js
+// Do not edit this file manually
+// This file validates that all pages and layouts export the correct types
+// Validate ../../../app/(auth)/login/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/(protected)/component/[id]/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/(protected)/component/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/(protected)/docs/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/account/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/pricing/page.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/api/me/route.ts
+{
+    const handler = {};
+}
+// Validate ../../../app/(auth)/layout.tsx
+{
+    const handler = {};
+}
+// Validate ../../../app/layout.tsx
+{
+    const handler = {};
+}
+export {};

package/dist/__registry__/index.d.ts

@@ -0,0 +1 @@
+export declare const Index: Record<string, any>;

package/dist/__registry__/index.js

@@ -0,0 +1,492 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+import * as React from "react";
+export const Index = {
+    "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: "",
+        },
+    }
+};

package/dist/app/(auth)/layout.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const layout: ({ children }: {
+    children: React.ReactNode;
+}) => Promise<import("react/jsx-runtime").JSX.Element>;
+export default layout;

package/dist/app/(auth)/layout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const layout = async ({ children }) => {
+    const isUserAuthenticated = false; // remove later
+    // const isUserAuthenticated = await isAuthenticated(); 
+    // if (!isUserAuthenticated) redirect('/sign-in');
+    return (_jsx("div", { className: 'auth-layout', children: children }));
+};
+export default layout;

package/dist/app/(auth)/login/page.d.ts

@@ -0,0 +1 @@
+export default function LoginPage(): import("react/jsx-runtime").JSX.Element;

package/dist/app/(auth)/login/page.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight } from 'lucide-react';
+import { useState, useCallback } from 'react';
+import { sendOtp, verifyOtp } from '@/lib/actions/auth.action';
+import { Toast } from '@/components/toast';
+function useToast() {
+    const [toasts, setToasts] = useState([]);
+    const showToast = useCallback((message) => {
+        const id = Date.now();
+        setToasts((prev) => [...prev, { id, message }]);
+    }, []);
+    const removeToast = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    return { toasts, showToast, removeToast };
+}
+export default function LoginPage() {
+    const [step, setStep] = useState('email');
+    const [email, setEmail] = useState('');
+    const [loading, setLoading] = useState(false);
+    const { toasts, showToast, removeToast } = useToast();
+    return (_jsxs("div", { className: 'min-h-screen flex flex-col items-center justify-center text-white px-4 font-sans selection:bg-zinc-800', children: [toasts.map((t) => (_jsx(Toast, { message: t.message, onClose: () => removeToast(t.id) }, t.id))), _jsx("div", { className: 'w-full max-w-2xl', children: step === 'email' ? (_jsxs("form", { onSubmit: async (e) => {
+                        e.preventDefault();
+                        setLoading(true);
+                        const formData = new FormData();
+                        formData.append('email', email);
+                        await sendOtp(formData);
+                        setLoading(false);
+                        showToast('OTP sent to your email');
+                        setStep('otp');
+                    }, className: 'relative group', children: [_jsx("input", { type: 'email', autoFocus: true, required: true, disabled: loading, value: email, placeholder: 'you@example.com', onChange: (e) => setEmail(e.target.value), className: 'w-full bg-transparent text-xl md:text-5xl font-light py-4 outline-none border-b border-zinc-800 focus:border-zinc-400 transition-all duration-500 placeholder:text-zinc-800' }), loading ? (_jsx(Loader, { text: 'Sending' })) : (_jsx("button", { type: 'submit', className: 'absolute right-0 top-1/2 -translate-y-1/2 p-2 text-zinc-500 hover:text-white transition-colors', children: _jsx(ArrowRight, { size: 32, strokeWidth: 1.5 }) }))] })) : (
+                /* OTP STEP */
+                _jsxs("form", { onSubmit: async (e) => {
+                        e.preventDefault();
+                        setLoading(true);
+                        const formData = new FormData(e.currentTarget);
+                        formData.append('email', email);
+                        await verifyOtp(formData);
+                    }, className: 'space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700', children: [_jsx("label", { htmlFor: 'otp', children: "Enter the 6-digit code sent to your email" }), _jsxs("div", { className: 'relative group', children: [_jsx("input", { type: 'text', name: 'otp', autoFocus: true, maxLength: 6, disabled: loading, placeholder: '000000', className: 'w-full bg-transparent text-xl md:text-5xl font-light py-4 outline-none border-b border-zinc-800 focus:border-zinc-400 transition-all text-center tracking-[1em] placeholder:text-zinc-900' }), loading ? (_jsx(Loader, { text: 'Verifying' })) : (_jsx("button", { type: 'submit', className: 'absolute right-0 top-1/2 -translate-y-1/2 p-2 text-zinc-500 hover:text-white transition-colors', children: _jsx(ArrowRight, { size: 32, strokeWidth: 1.5 }) }))] })] })) }), _jsx("footer", { className: 'fixed bottom-8 text-md text-zinc-600 uppercase font-hoshiko font-bold', children: "Slash/ui" })] }));
+}
+/* Loader Component */
+function Loader({ text }) {
+    return (_jsxs("div", { className: 'absolute right-0 top-1/2 -translate-y-1/2 text-zinc-400 text-sm flex items-center gap-1', children: ["[", text, _jsxs("span", { className: 'flex', children: [_jsx("span", { className: 'animate-bounce', children: "." }), _jsx("span", { className: 'animate-bounce delay-150', children: "." }), _jsx("span", { className: 'animate-bounce delay-300', children: "." })] }), "]"] }));
+}

package/dist/app/(protected)/component/[id]/page.d.ts

@@ -0,0 +1,5 @@
+export default function Page({ params, }: {
+    params: Promise<{
+        id: string;
+    }>;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/app/(protected)/component/[id]/page.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { Index } from '@/__registry__';
+import ShowcaseContainer from '@/components/ui/ShowcaseContainer';
+export default async function Page({ params, }) {
+    const { id } = await params;
+    const activeItem = Index['default'][id];
+    if (!activeItem) {
+        return _jsxs("div", { children: ["Component \"", id, "\" not found in __registry__/index.ts"] });
+    }
+    const SelectedComponent = activeItem === null || activeItem === void 0 ? void 0 : activeItem.component;
+    return (_jsx(ShowcaseContainer, { title: (activeItem === null || activeItem === void 0 ? void 0 : activeItem.name) || id, code: activeItem === null || activeItem === void 0 ? void 0 : activeItem.content, description: activeItem === null || activeItem === void 0 ? void 0 : activeItem.description, install: activeItem === null || activeItem === void 0 ? void 0 : activeItem.install, children: SelectedComponent ? (_jsx(Suspense, { fallback: _jsx("div", { className: 'flex items-center justify-center h-40', children: _jsx("div", { className: 'animate-spin rounded-full h-8 w-8 border-b-2 border-white' }) }), children: _jsx(SelectedComponent, {}) })) : (_jsxs("div", { className: 'flex flex-col items-center justify-center h-64 border border-dashed border-zinc-800 rounded-xl bg-zinc-950/50', children: [_jsxs("p", { className: 'text-zinc-500 font-mono text-xs uppercase tracking-widest', children: ["Component \"", id, "\" not found"] }), _jsx("span", { className: 'text-[10px] text-zinc-700 mt-2', children: "Check registry/index.ts and run build-registry.ts" })] })) }));
+}

package/dist/app/(protected)/component/page.d.ts

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

package/dist/app/(protected)/component/page.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import Link from 'next/link';
+const ComponentCard = ({ title, author, videoSrc, children, span = '', }) => {
+    const videoRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+        if (videoRef.current) {
+            videoRef.current.play().catch(() => { });
+        }
+    };
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+        if (videoRef.current) {
+            videoRef.current.pause();
+            videoRef.current.currentTime = 0;
+        }
+    };
+    return (_jsxs("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, className: `group relative flex flex-col justify-between rounded-3xl bg-[#161616] border border-white/5 p-1 hover:border-white/20 transition-all duration-500 h-full ${span}`, children: [_jsx("div", { className: `absolute inset-0 transition-opacity duration-500 rounded-3xl bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.05)_0%,transparent_70%)] ${isHovered ? 'opacity-100' : 'opacity-0'}` }), _jsx("div", { className: 'relative flex-grow overflow-hidden rounded-[22px] bg-[#0A0A0A] flex items-center justify-center min-h-[200px] cursor-pointer border border-white/[0.03]', children: videoSrc ? (_jsx("video", { ref: videoRef, src: videoSrc, loop: true, muted: true, playsInline: true, className: `absolute inset-0 w-full h-full object-cover transition-all duration-700 ${isHovered ? 'opacity-100 scale-105' : 'opacity-30 scale-100'}` })) : (_jsx("div", { className: 'relative z-10 w-full h-full flex items-center justify-center', children: children })) }), _jsxs("div", { className: 'px-4 py-3 flex justify-between items-center bg-transparent relative z-10', children: [_jsx("h3", { className: 'text-sm font-medium text-zinc-400 group-hover:text-white transition-colors', children: title }), _jsx("span", { className: 'text-[10px] text-zinc-600 font-mono italic', children: author || 'skiper' })] })] }));
+};
+const ComponentsPage = () => {
+    return (_jsx("div", { className: 'min-h-screen  pt-32 pb-20 px-6', children: _jsx("div", { className: 'max-w-7xl mx-auto space-y-32', children: _jsxs("section", { children: [_jsxs("div", { className: 'mb-12', children: [_jsxs("h2", { className: 'text-white text-3xl font-bold flex items-center gap-3', children: ["Some Random Components", ' '] }), _jsx("p", { className: 'text-zinc-500 text-sm mt-2', children: "Collection of interactive components [Click to view]" })] }), _jsxs("div", { className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-[280px]', children: [_jsx(Link, { href: '/component/image-reveal', className: 'block', children: _jsx(ComponentCard, { title: 'Image reveal', author: 'skiper1', videoSrc: '/videos/reveal-demo.mp4' }) }), _jsx(Link, { href: '/component/hover-members', className: 'lg:col-span-2', children: _jsx(ComponentCard, { title: 'Hover members', author: 'skiper2', videoSrc: '/videos/members-demo.mp4' }) }), _jsx(Link, { href: '/component/drag-scroll', className: 'lg:row-span-2', children: _jsx(ComponentCard, { title: 'Things drag and scroll', author: 'skiper3', videoSrc: '/videos/drag-demo.mp4' }) }), _jsx(Link, { href: '/component/dynamic-island', className: 'block', children: _jsx(ComponentCard, { title: 'Dynamic island', author: 'skiper4' }) }), _jsx(Link, { href: '/component/devouring-details', className: 'lg:col-span-2', children: _jsx(ComponentCard, { title: 'Devouring details', author: 'skiper5', videoSrc: '/videos/details-demo.mp4' }) }), _jsx(Link, { href: '/component/scrollbar', className: 'block', children: _jsx(ComponentCard, { title: 'Anime js scrollbar', author: 'skiper6', videoSrc: '/videos/scrollbar.mp4' }) })] })] }) }) }));
+};
+export default ComponentsPage;

package/dist/app/(protected)/docs/page.d.ts

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