@manas-dev/sound-lab 1.0.1

package/src/index.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Music, X, Sparkles, Keyboard, Gamepad2, Box, Headphones, Zap, Droplets } from 'lucide-react';
+
+export interface SoundProfile {
+    id: string;
+    name: string;
+    icon: any; // Lucide icon component
+}
+
+const DEFAULT_SOUNDS: SoundProfile[] = [
+    { id: 'glass', name: 'Glass', icon: Sparkles },
+    { id: 'thock', name: 'Thock', icon: Keyboard },
+    { id: 'console', name: 'Console', icon: Gamepad2 },
+    { id: 'minecraft', name: 'Minecraft', icon: Box },
+    { id: 'retro', name: 'Retro', icon: Gamepad2 },
+    { id: 'lofi', name: 'Lofi', icon: Headphones },
+    { id: 'mechanical', name: 'Clicky', icon: Keyboard },
+    { id: 'scifi', name: 'Sci-Fi', icon: Zap },
+    { id: 'bubble', name: 'Bubble', icon: Droplets },
+];
+
+export interface SoundLabProps {
+    isSoundEnabled: boolean;
+    setIsSoundEnabled: (enabled: boolean) => void;
+    volume: number;
+    setVolume: (volume: number) => void;
+    soundProfile: string;
+    setSoundProfile: (profileId: string) => void;
+    isDark: boolean;
+    playSound?: (type: 'click' | 'hover' | 'switch') => void;
+    primaryColor?: string; // Hex color for active states
+    className?: string;
+    sounds?: SoundProfile[];
+}
+
+export const SoundLab: React.FC<SoundLabProps> = ({
+    isSoundEnabled,
+    setIsSoundEnabled,
+    volume,
+    setVolume,
+    soundProfile,
+    setSoundProfile,
+    isDark,
+    playSound = () => { },
+    primaryColor = '#3b82f6', // Default blue-500
+    className = '',
+    sounds = DEFAULT_SOUNDS
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [toastMessage, setToastMessage] = useState<string | null>(null);
+    const [showToast, setShowToast] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const showNotification = (message: string) => {
+        setToastMessage(message);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 2000);
+    };
+
+    const handleMouseEnter = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
+
+    const handleMouseLeave = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsOpen(false);
+        }, 1000);
+    };
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+    }, []);
+
+    // Helper for Hex transparency
+    const hexToRgba = (hex: string, alpha: number) => {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
+
+    return (
+        <div className={`relative ${className}`}>
+            {/* Toast Notification */}
+            {showToast && (
+                <div className={`fixed top-20 right-4 px-4 py-2 rounded-xl shadow-lg backdrop-blur-md border animate-in slide-in-from-top-2 fade-in duration-300 z-[60] whitespace-nowrap
+                    ${isDark ? 'bg-zinc-800/90 border-zinc-700 text-white' : 'bg-white/90 border-slate-200 text-slate-800'}`}>
+                    <span className="text-xs font-bold">{toastMessage}</span>
+                </div>
+            )}
+
+            {/* Trigger Button */}
+            <button
+                onClick={() => { setIsOpen(!isOpen); playSound('click'); }}
+                onMouseEnter={() => playSound('hover')}
+                className={`p-2 md:p-3 rounded-full transition-all duration-300
+                    ${isOpen || isSoundEnabled
+                        ? (isDark ? `bg-zinc-800` : `bg-white`)
+                        : (isDark ? 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50')
+                    }`}
+                style={isOpen || isSoundEnabled ? { color: primaryColor } : {}}
+                aria-label="Open sound menu"
+            >
+                {isSoundEnabled ? <Music size={20} className="md:w-6 md:h-6 animate-pulse" /> : <Music size={20} className="md:w-6 md:h-6" />}
+            </button>
+
+            {/* Sound Lab Popup */}
+            {isOpen && (
+                <div
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    className={`absolute top-full right-0 mt-4 p-4 rounded-3xl border w-[280px] backdrop-blur-xl shadow-2xl animate-in slide-in-from-top-5 fade-in z-50
+           ${isDark ? 'bg-zinc-900/95 border-zinc-800' : 'bg-white/95 border-white/60'}`}>
+
+                    <div className="flex justify-between items-center mb-4">
+                        <div className="flex items-center gap-2">
+                            <Music size={14} className={isDark ? 'text-zinc-400' : 'text-slate-400'} />
+                            <span className={`text-xs font-bold uppercase tracking-wider ${isDark ? 'text-zinc-500' : 'text-slate-500'}`}>Sound Lab</span>
+                        </div>
+                        <button
+                            onClick={() => { setIsOpen(false); playSound('click'); }}
+                            className={`p-1 rounded-full ${isDark ? 'hover:bg-zinc-800' : 'hover:bg-slate-100'}`}
+                            aria-label="Close sound menu"
+                        >
+                            <X size={14} className={isDark ? 'text-zinc-400' : 'text-slate-400'} />
+                        </button>
+                    </div>
+
+                    {/* Master Toggle */}
+                    <div className={`flex items-center justify-between p-3 rounded-xl mb-4 transition-colors
+                        ${isDark ? 'bg-zinc-800/50' : 'bg-slate-50'}`}>
+                        <span className={`text-xs font-medium ${isDark ? 'text-zinc-300' : 'text-slate-600'}`}>Master Audio</span>
+                        <button
+                            onClick={() => {
+                                setIsSoundEnabled(!isSoundEnabled);
+                                if (!isSoundEnabled) { // If turning ON, play a sound
+                                    setTimeout(() => playSound('switch'), 50);
+                                    showNotification('Sound Enabled');
+                                } else {
+                                    showNotification('Sound Disabled');
+                                }
+                            }}
+                            className={`relative w-10 h-6 rounded-full transition-colors duration-300 ${isDark ? 'bg-zinc-700' : 'bg-slate-300'}`}
+                            style={{ backgroundColor: isSoundEnabled ? primaryColor : undefined }}
+                            aria-label={isSoundEnabled ? "Disable sound" : "Enable sound"}
+                        >
+                            <span className={`absolute top-1 left-1 w-4 h-4 rounded-full bg-white transition-transform duration-300 ${isSoundEnabled ? 'translate-x-4' : 'translate-x-0'}`}></span>
+                        </button>
+                    </div>
+
+                    {/* Volume Slider */}
+                    <div className={`p-3 rounded-xl mb-4 transition-colors ${isDark ? 'bg-zinc-800/50' : 'bg-slate-50'}`}>
+                        <div className="flex justify-between items-center mb-2">
+                            <span className={`text-xs font-medium ${isDark ? 'text-zinc-300' : 'text-slate-600'}`}>Volume</span>
+                            <span className="text-xs font-bold" style={{ color: primaryColor }}>{Math.round(volume * 100)}%</span>
+                        </div>
+                        <input
+                            type="range"
+                            min="0"
+                            max="1"
+                            step="0.05"
+                            value={volume}
+                            onChange={(e) => {
+                                setVolume(parseFloat(e.target.value));
+                                if (!isSoundEnabled) setIsSoundEnabled(true);
+                            }}
+                            className={`w-full h-1.5 rounded-full appearance-none cursor-pointer ${isDark ? 'bg-zinc-700' : 'bg-slate-300'} accent-current`}
+                            style={{ accentColor: primaryColor }}
+                            aria-label="Volume control"
+                        />
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-2">
+                        {sounds.map((profile) => (
+                            <button
+                                key={profile.id}
+                                onClick={() => {
+                                    setSoundProfile(profile.id);
+                                    if (!isSoundEnabled) setIsSoundEnabled(true);
+                                    setTimeout(() => playSound('click'), 50);
+                                    showNotification(`Profile: ${profile.name}`);
+                                }}
+                                className={`flex flex-col items-center gap-1 p-2 rounded-xl border transition-all duration-300
+                                ${isDark ? 'bg-transparent border-transparent hover:bg-zinc-800' : 'bg-transparent border-transparent hover:bg-slate-100'}`}
+                                style={soundProfile === profile.id ? {
+                                    backgroundColor: hexToRgba(primaryColor, 0.1),
+                                    borderColor: hexToRgba(primaryColor, 0.5)
+                                } : {}}
+                            >
+                                <profile.icon size={16}
+                                    className={isDark ? 'text-zinc-500' : 'text-slate-400'}
+                                    style={soundProfile === profile.id ? { color: primaryColor } : {}}
+                                />
+                                <span className={`text-[10px] font-medium ${isDark ? 'text-zinc-500' : 'text-slate-500'}`}
+                                    style={soundProfile === profile.id ? { color: isDark ? 'white' : primaryColor } : {}}
+                                >
+                                    {profile.name}
+                                </span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

package/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "declaration": true,
+        "rootDir": "src",
+        "outDir": "dist"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}