@stfrigerio/sito-template 0.1.26 → 0.1.28

package/dist/index.js

@@ -53,6 +53,527 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
 
 var styles$r = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
 
+const SOUND_PACKS = {
+    digital: {
+        click: {
+            tones: [
+                { freq: 440, duration: 0.1, type: 'sine', volume: 0.4 }
+            ]
+        },
+        hover: {
+            tones: [
+                { freq: 880, duration: 0.04, type: 'sine', volume: 0.3 }
+            ]
+        },
+        success: {
+            tones: [
+                { freq: 523.25, duration: 0.15, type: 'sine', delay: 0 },
+                { freq: 659.25, duration: 0.15, type: 'sine', delay: 0.1 },
+                { freq: 783.99, duration: 0.2, type: 'sine', delay: 0.2 }
+            ]
+        },
+        error: {
+            tones: [
+                { freq: 329.63, duration: 0.2, type: 'sawtooth', volume: 0.4 },
+                { freq: 246.94, duration: 0.25, type: 'sawtooth', volume: 0.3, delay: 0.15 }
+            ]
+        },
+        warning: {
+            tones: [
+                { freq: 554.37, duration: 0.15, type: 'triangle' },
+                { freq: 554.37, duration: 0.15, type: 'triangle', delay: 0.2 }
+            ]
+        },
+        toggle: {
+            tones: [
+                { freq: 493.88, duration: 0.12, type: 'sine' },
+                { freq: 587.33, duration: 0.1, type: 'sine', delay: 0.08 }
+            ]
+        },
+        type: {
+            tones: [
+                { freq: () => 800 + Math.random() * 400, duration: 0.08, type: 'square', volume: 0.5 },
+                { freq: 1600, duration: 0.03, type: 'sine', volume: 0.3, delay: 0.02 }
+            ]
+        },
+        delete: {
+            tones: [
+                { freq: 350, duration: 0.08, type: 'triangle', volume: 0.3 }
+            ]
+        },
+        celebration: {
+            tones: [
+                { freq: 523.25, duration: 0.2, type: 'sine', delay: 0 },
+                { freq: 659.25, duration: 0.2, type: 'sine', delay: 0.15 },
+                { freq: 783.99, duration: 0.2, type: 'sine', delay: 0.3 },
+                { freq: 1046.5, duration: 0.3, type: 'sine', delay: 0.45 }
+            ]
+        },
+        milestone: {
+            tones: [
+                { freq: 698.46, duration: 0.2, type: 'triangle' },
+                { freq: 880, duration: 0.25, type: 'triangle', delay: 0.15 }
+            ]
+        }
+    },
+    fantasy: {
+        click: {
+            tones: [
+                // Magical chime
+                { freq: 1174.66, duration: 0.15, type: 'triangle', volume: 0.3 }, // D6
+                { freq: 1567.98, duration: 0.1, type: 'sine', volume: 0.2, delay: 0.05 }, // G6
+                { freq: 2093, duration: 0.08, type: 'sine', volume: 0.15, delay: 0.08 } // C7
+            ]
+        },
+        hover: {
+            tones: [
+                // Fairy dust sprinkle
+                { freq: 2637.02, duration: 0.03, type: 'sine', volume: 0.2 }, // E7
+                { freq: 3135.96, duration: 0.025, type: 'sine', volume: 0.15, delay: 0.02 } // G7
+            ]
+        },
+        success: {
+            tones: [
+                // Triumphant fanfare
+                { freq: 523.25, duration: 0.2, type: 'triangle', delay: 0 }, // C5
+                { freq: 659.25, duration: 0.2, type: 'triangle', delay: 0.15 }, // E5
+                { freq: 783.99, duration: 0.2, type: 'triangle', delay: 0.3 }, // G5
+                { freq: 1046.5, duration: 0.35, type: 'sine', delay: 0.45 }, // C6
+                { freq: 1318.51, duration: 0.15, type: 'sine', volume: 0.3, delay: 0.6 } // E6 harmony
+            ]
+        },
+        error: {
+            tones: [
+                // Dark spell fail
+                { freq: 138.59, duration: 0.3, type: 'sawtooth', volume: 0.4 }, // C#3
+                { freq: 103.83, duration: 0.4, type: 'sawtooth', volume: 0.3, delay: 0.2 }, // G#2
+                { freq: 87.31, duration: 0.2, type: 'triangle', volume: 0.2, delay: 0.4 } // F2
+            ]
+        },
+        warning: {
+            tones: [
+                // Mystical alert
+                { freq: 466.16, duration: 0.2, type: 'triangle', volume: 0.5 }, // A#4
+                { freq: 622.25, duration: 0.15, type: 'sine', delay: 0.15 }, // D#5
+                { freq: 466.16, duration: 0.2, type: 'triangle', volume: 0.4, delay: 0.25 } // A#4
+            ]
+        },
+        toggle: {
+            tones: [
+                // Magic switch
+                { freq: 698.46, duration: 0.15, type: 'sine' }, // F5
+                { freq: 1046.5, duration: 0.12, type: 'triangle', delay: 0.1 }, // C6
+                { freq: 1396.91, duration: 0.08, type: 'sine', volume: 0.3, delay: 0.18 } // F6
+            ]
+        },
+        type: {
+            tones: [
+                // Quill on parchment
+                { freq: () => 2000 + Math.random() * 500, duration: 0.04, type: 'triangle', volume: 0.3 },
+                { freq: () => 3000 + Math.random() * 200, duration: 0.02, type: 'sine', volume: 0.2, delay: 0.01 }
+            ]
+        },
+        delete: {
+            tones: [
+                // Magic erase
+                { freq: 880, duration: 0.1, type: 'triangle', volume: 0.3 },
+                { freq: 440, duration: 0.08, type: 'sine', volume: 0.2, delay: 0.05 }
+            ]
+        },
+        celebration: {
+            tones: [
+                // Victory fanfare
+                { freq: 392, duration: 0.25, type: 'triangle', delay: 0 }, // G4
+                { freq: 523.25, duration: 0.25, type: 'triangle', delay: 0.2 }, // C5
+                { freq: 659.25, duration: 0.25, type: 'triangle', delay: 0.4 }, // E5
+                { freq: 783.99, duration: 0.25, type: 'sine', delay: 0.6 }, // G5
+                { freq: 1046.5, duration: 0.4, type: 'sine', delay: 0.8 }, // C6
+                { freq: 1318.51, duration: 0.2, type: 'sine', volume: 0.4, delay: 1.0 } // E6
+            ]
+        },
+        milestone: {
+            tones: [
+                // Achievement unlocked
+                { freq: 523.25, duration: 0.2, type: 'triangle' }, // C5
+                { freq: 783.99, duration: 0.2, type: 'triangle', delay: 0.15 }, // G5
+                { freq: 1046.5, duration: 0.3, type: 'sine', delay: 0.3 } // C6
+            ]
+        }
+    },
+    retro: {
+        click: {
+            tones: [
+                // 8-bit beep
+                { freq: 800, duration: 0.05, type: 'square', volume: 0.4 },
+                { freq: 400, duration: 0.03, type: 'square', volume: 0.3, delay: 0.03 }
+            ]
+        },
+        hover: {
+            tones: [
+                { freq: 1200, duration: 0.03, type: 'square', volume: 0.2 }
+            ]
+        },
+        success: {
+            tones: [
+                // Classic level up
+                { freq: 440, duration: 0.1, type: 'square', delay: 0 },
+                { freq: 554.37, duration: 0.1, type: 'square', delay: 0.1 },
+                { freq: 659.25, duration: 0.1, type: 'square', delay: 0.2 },
+                { freq: 880, duration: 0.2, type: 'square', delay: 0.3 }
+            ]
+        },
+        error: {
+            tones: [
+                // Retro fail
+                { freq: 200, duration: 0.3, type: 'square', volume: 0.5 },
+                { freq: 150, duration: 0.4, type: 'square', volume: 0.4, delay: 0.2 }
+            ]
+        },
+        warning: {
+            tones: [
+                { freq: 600, duration: 0.1, type: 'square' },
+                { freq: 600, duration: 0.1, type: 'square', delay: 0.15 },
+                { freq: 600, duration: 0.1, type: 'square', delay: 0.3 }
+            ]
+        },
+        toggle: {
+            tones: [
+                { freq: 400, duration: 0.08, type: 'square' },
+                { freq: 800, duration: 0.08, type: 'square', delay: 0.06 }
+            ]
+        },
+        type: {
+            tones: [
+                { freq: () => 500 + Math.random() * 100, duration: 0.04, type: 'square', volume: 0.3 }
+            ]
+        },
+        delete: {
+            tones: [
+                { freq: 300, duration: 0.06, type: 'square', volume: 0.3 }
+            ]
+        },
+        celebration: {
+            tones: [
+                // Victory jingle
+                { freq: 659.25, duration: 0.1, type: 'square', delay: 0 },
+                { freq: 783.99, duration: 0.1, type: 'square', delay: 0.1 },
+                { freq: 987.77, duration: 0.1, type: 'square', delay: 0.2 },
+                { freq: 1318.51, duration: 0.3, type: 'square', delay: 0.3 }
+            ]
+        },
+        milestone: {
+            tones: [
+                { freq: 523.25, duration: 0.15, type: 'square' },
+                { freq: 1046.5, duration: 0.2, type: 'square', delay: 0.1 }
+            ]
+        }
+    },
+    minimal: {
+        click: {
+            tones: [
+                { freq: 1000, duration: 0.03, type: 'sine', volume: 0.3 }
+            ]
+        },
+        hover: {
+            tones: [
+                { freq: 1500, duration: 0.02, type: 'sine', volume: 0.15 }
+            ]
+        },
+        success: {
+            tones: [
+                { freq: 800, duration: 0.15, type: 'sine', volume: 0.3 },
+                { freq: 1200, duration: 0.1, type: 'sine', volume: 0.2, delay: 0.1 }
+            ]
+        },
+        error: {
+            tones: [
+                { freq: 300, duration: 0.2, type: 'sine', volume: 0.3 }
+            ]
+        },
+        warning: {
+            tones: [
+                { freq: 600, duration: 0.15, type: 'sine', volume: 0.35 }
+            ]
+        },
+        toggle: {
+            tones: [
+                { freq: 700, duration: 0.08, type: 'sine', volume: 0.3 }
+            ]
+        },
+        type: {
+            tones: [
+                { freq: 1800, duration: 0.02, type: 'sine', volume: 0.2 }
+            ]
+        },
+        delete: {
+            tones: [
+                { freq: 400, duration: 0.05, type: 'sine', volume: 0.25 }
+            ]
+        },
+        celebration: {
+            tones: [
+                { freq: 800, duration: 0.2, type: 'sine', volume: 0.3 },
+                { freq: 1200, duration: 0.2, type: 'sine', volume: 0.25, delay: 0.15 }
+            ]
+        },
+        milestone: {
+            tones: [
+                { freq: 1000, duration: 0.2, type: 'sine', volume: 0.3 }
+            ]
+        }
+    },
+    mechanical: {
+        click: {
+            tones: [
+                // Mechanical keyboard click
+                { freq: 4000, duration: 0.01, type: 'square', volume: 0.3 },
+                { freq: 800, duration: 0.04, type: 'sawtooth', volume: 0.4, delay: 0.01 },
+                { freq: 200, duration: 0.03, type: 'triangle', volume: 0.2, delay: 0.02 }
+            ]
+        },
+        hover: {
+            tones: [
+                { freq: 3000, duration: 0.02, type: 'sawtooth', volume: 0.1 }
+            ]
+        },
+        success: {
+            tones: [
+                // Gear engagement
+                { freq: 200, duration: 0.05, type: 'sawtooth', delay: 0 },
+                { freq: 400, duration: 0.05, type: 'sawtooth', delay: 0.05 },
+                { freq: 600, duration: 0.05, type: 'sawtooth', delay: 0.1 },
+                { freq: 800, duration: 0.15, type: 'triangle', delay: 0.15 }
+            ]
+        },
+        error: {
+            tones: [
+                // Grinding gears
+                { freq: 150, duration: 0.2, type: 'sawtooth', volume: 0.5 },
+                { freq: 100, duration: 0.15, type: 'square', volume: 0.3, delay: 0.1 },
+                { freq: 80, duration: 0.1, type: 'sawtooth', volume: 0.2, delay: 0.2 }
+            ]
+        },
+        warning: {
+            tones: [
+                // Steam whistle
+                { freq: 800, duration: 0.3, type: 'sawtooth', volume: 0.4 },
+                { freq: 1200, duration: 0.2, type: 'triangle', volume: 0.3, delay: 0 }
+            ]
+        },
+        toggle: {
+            tones: [
+                // Switch flip
+                { freq: 600, duration: 0.02, type: 'square', volume: 0.5 },
+                { freq: 300, duration: 0.05, type: 'triangle', delay: 0.02 },
+                { freq: 150, duration: 0.03, type: 'sawtooth', volume: 0.3, delay: 0.05 }
+            ]
+        },
+        type: {
+            tones: [
+                // Typewriter key
+                { freq: () => 3000 + Math.random() * 1000, duration: 0.01, type: 'square', volume: 0.4 },
+                { freq: () => 400 + Math.random() * 200, duration: 0.03, type: 'sawtooth', volume: 0.3, delay: 0.01 }
+            ]
+        },
+        delete: {
+            tones: [
+                { freq: 250, duration: 0.08, type: 'sawtooth', volume: 0.35 }
+            ]
+        },
+        celebration: {
+            tones: [
+                // Machine startup
+                { freq: 100, duration: 0.1, type: 'sawtooth', delay: 0 },
+                { freq: 200, duration: 0.1, type: 'sawtooth', delay: 0.1 },
+                { freq: 400, duration: 0.1, type: 'sawtooth', delay: 0.2 },
+                { freq: 800, duration: 0.1, type: 'triangle', delay: 0.3 },
+                { freq: 1200, duration: 0.2, type: 'sine', delay: 0.4 }
+            ]
+        },
+        milestone: {
+            tones: [
+                // Pneumatic hiss
+                { freq: 3000, duration: 0.05, type: 'sawtooth', volume: 0.3 },
+                { freq: 1000, duration: 0.15, type: 'triangle', delay: 0.05 },
+                { freq: 500, duration: 0.1, type: 'sine', delay: 0.15 }
+            ]
+        }
+    }
+};
+class SoundManager {
+    constructor() {
+        this.audioContext = null;
+        this.config = {
+            enabled: false,
+            volume: 0.5,
+            soundPack: 'digital'
+        };
+        this.init();
+    }
+    static getInstance() {
+        if (!SoundManager.instance) {
+            SoundManager.instance = new SoundManager();
+        }
+        return SoundManager.instance;
+    }
+    init() {
+        try {
+            // AudioContext will be created on first user interaction
+            this.audioContext = null;
+        }
+        catch (error) {
+            console.warn('Audio not supported:', error);
+            this.config.enabled = false;
+        }
+    }
+    ensureAudioContext() {
+        if (!this.audioContext && this.config.enabled) {
+            try {
+                this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            }
+            catch (error) {
+                console.warn('Could not create audio context:', error);
+                this.config.enabled = false;
+            }
+        }
+    }
+    playTone(frequency, duration, type = 'sine', volume, delay = 0) {
+        if (!this.config.enabled)
+            return;
+        this.ensureAudioContext();
+        if (!this.audioContext)
+            return;
+        const finalVolume = (volume ?? this.config.volume ?? 0.5) * 0.2; // Scale down for comfort
+        try {
+            const oscillator = this.audioContext.createOscillator();
+            const gainNode = this.audioContext.createGain();
+            oscillator.connect(gainNode);
+            gainNode.connect(this.audioContext.destination);
+            oscillator.frequency.value = frequency;
+            oscillator.type = type;
+            const startTime = this.audioContext.currentTime + delay;
+            gainNode.gain.setValueAtTime(0, startTime);
+            gainNode.gain.linearRampToValueAtTime(finalVolume, startTime + 0.01);
+            gainNode.gain.exponentialRampToValueAtTime(0.001, startTime + duration);
+            oscillator.start(startTime);
+            oscillator.stop(startTime + duration);
+        }
+        catch (error) {
+            console.debug('Could not play sound:', error);
+        }
+    }
+    playFromDefinition(definition) {
+        definition.tones.forEach(tone => {
+            const frequency = typeof tone.freq === 'function' ? tone.freq() : tone.freq;
+            this.playTone(frequency, tone.duration, tone.type, tone.volume, tone.delay || 0);
+        });
+    }
+    play(soundType) {
+        if (!this.config.enabled)
+            return;
+        const pack = SOUND_PACKS[this.config.soundPack || 'digital'];
+        const soundDef = pack[soundType];
+        if (soundDef) {
+            this.playFromDefinition(soundDef);
+        }
+        else {
+            // Fallback to digital pack for unknown sounds
+            const digitalSound = SOUND_PACKS.digital[soundType];
+            if (digitalSound) {
+                this.playFromDefinition(digitalSound);
+            }
+        }
+    }
+    // Special effect sounds
+    celebration() {
+        if (!this.config.enabled)
+            return;
+        const pack = SOUND_PACKS[this.config.soundPack || 'digital'];
+        this.playFromDefinition(pack.celebration);
+    }
+    milestone() {
+        if (!this.config.enabled)
+            return;
+        const pack = SOUND_PACKS[this.config.soundPack || 'digital'];
+        this.playFromDefinition(pack.milestone);
+    }
+    configure(config) {
+        this.config = { ...this.config, ...config };
+    }
+    getConfig() {
+        return this.config;
+    }
+    setVolume(volume) {
+        this.config.volume = Math.max(0, Math.min(1, volume));
+    }
+    setEnabled(enabled) {
+        this.config.enabled = enabled;
+        if (enabled) {
+            this.ensureAudioContext();
+        }
+    }
+    setSoundPack(pack) {
+        this.config.soundPack = pack;
+    }
+    getSoundPack() {
+        return this.config.soundPack || 'digital';
+    }
+    isEnabled() {
+        return this.config.enabled || false;
+    }
+    getAvailablePacks() {
+        return ['digital', 'fantasy', 'retro', 'minimal', 'mechanical'];
+    }
+}
+const soundManager = SoundManager.getInstance();
+
+function useSound(options) {
+    const lastPlayedRef = React.useRef({});
+    const debounceMs = options?.debounceMs || 50;
+    React.useEffect(() => {
+        if (options?.enabled !== undefined) {
+            soundManager.setEnabled(options.enabled);
+        }
+        if (options?.volume !== undefined) {
+            soundManager.setVolume(options.volume);
+        }
+    }, [options?.enabled, options?.volume]);
+    const playSound = React.useCallback((soundType) => {
+        const now = Date.now();
+        const lastPlayed = lastPlayedRef.current[soundType] || 0;
+        if (now - lastPlayed > debounceMs) {
+            soundManager.play(soundType);
+            lastPlayedRef.current[soundType] = now;
+        }
+    }, [debounceMs]);
+    const isEnabled = React.useCallback(() => soundManager.isEnabled(), []);
+    const setEnabled = React.useCallback((enabled) => soundManager.setEnabled(enabled), []);
+    const setVolume = React.useCallback((volume) => soundManager.setVolume(volume), []);
+    return {
+        playSound,
+        isEnabled,
+        setEnabled,
+        setVolume
+    };
+}
+function useComponentSound(config, options) {
+    const { playSound } = useSound(options);
+    const handlers = {};
+    if (config?.onClick) {
+        handlers.onClick = () => {
+            const sound = typeof config.onClick === 'string' ? config.onClick : 'click';
+            playSound(sound);
+        };
+    }
+    if (config?.onHover) {
+        handlers.onMouseEnter = () => {
+            const sound = typeof config.onHover === 'string' ? config.onHover : 'hover';
+            playSound(sound);
+        };
+    }
+    return { handlers, playSound };
+}
+
 /**
  * Button Component
  *
@@ -92,7 +613,8 @@ var styles$r = {"button":"Button-module_button__c6nkW","primary":"Button-module_
  * @param {ButtonProps} props - The props for the Button component
  * @returns {JSX.Element} The rendered Button component
  */
-const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
+const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
+    const { handlers } = useComponentSound(soundConfig);
     const buttonClasses = [
         styles$r.button,
         styles$r[variant],
@@ -101,7 +623,15 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         loading && styles$r.loading,
         className
     ].filter(Boolean).join(' ');
-    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$r.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$r.iconRight, children: iconRight })] }));
+    const handleClick = (e) => {
+        handlers.onClick?.();
+        onClick?.(e);
+    };
+    const handleMouseEnter = (e) => {
+        handlers.onMouseEnter?.();
+        onMouseEnter?.(e);
+    };
+    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$r.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$r.iconRight, children: iconRight })] }));
 };
 
 var styles$q = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
@@ -227,14 +757,21 @@ var styles$p = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox
  *   disabled={true}
  * />
  */
-const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate = false, id, name, value }) => {
+const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate = false, id, name, value, soundConfig }) => {
     const checkboxRef = React.useRef(null);
+    const { playSound } = useComponentSound(soundConfig);
     React.useEffect(() => {
         if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsxRuntime.jsxs("label", { className: styles$p.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$p.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$p.checkboxText, children: label })] }));
+    return (jsxRuntime.jsxs("label", { className: styles$p.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
+                    const isChecked = e.target.checked;
+                    onChange(isChecked);
+                    if (soundConfig?.onClick !== false) {
+                        playSound('toggle');
+                    }
+                }, className: styles$p.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$p.checkboxText, children: label })] }));
 };
 
 var DefaultContext = {
@@ -408,8 +945,9 @@ var styles$o = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInp
  *   onBlur={() => validateDate(eventDate)}
  * />
  */
-function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus, onBlur, error = false, success = false, loading = false, disabled = false }) {
+function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, soundConfig }) {
     const hiddenDateInputRef = React.useRef(null);
+    const { handlers, playSound } = useComponentSound(soundConfig);
     const handleTextChange = (textValue) => {
         // Auto-format as user types
         let formatted = textValue.replace(/[^\d/]/g, '');
@@ -434,6 +972,7 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
         }
     };
     const handleCalendarClick = () => {
+        playSound('click');
         // Set the hidden input to current value for calendar
         if (hiddenDateInputRef.current) {
             // If value is already ISO format, use it directly
@@ -467,7 +1006,7 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
             classes.push(styles$o.loading);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsxs("div", { className: styles$o.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$o.textInput, disabled: disabled || loading }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$o.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
+    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsxs("div", { className: styles$o.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$o.textInput, disabled: disabled || loading, ...handlers }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$o.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
 }
 
 var styles$n = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
@@ -626,7 +1165,8 @@ var styles$m = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
  *   ]}
  * />
  */
-function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
+function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false, soundConfig }) {
+    const { handlers, playSound } = useComponentSound(soundConfig);
     const getClassName = () => {
         const classes = [styles$m.selectInput];
         if (error)
@@ -637,7 +1177,10 @@ function SelectInput({ label, value, onChange, options, placeholder = "Select...
             classes.push(styles$m.loading);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$m.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
+    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$m.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => {
+                            playSound('click');
+                            onChange(e.target.value);
+                        }, disabled: disabled || loading, required: required, ...handlers, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
                                 const optionValue = typeof opt === 'string' ? opt : opt.value;
                                 const optionLabel = typeof opt === 'string' ? opt : opt.label;
                                 return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
@@ -676,7 +1219,7 @@ var styles$l = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
  *   required
  * />
  */
-function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
+function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
     const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
     const getContainerClassName = () => {
         const classes = [styles$l.textareaContainer];
@@ -690,6 +1233,8 @@ function TextArea({ label, value, onChange, rows = 5, placeholder = "", required
             classes.push(styles$l.focusMode);
         if (compact)
             classes.push(styles$l.compact);
+        if (className)
+            classes.push(className);
         return classes.join(' ');
     };
     const getCharCountClassName = () => {
@@ -740,8 +1285,10 @@ var styles$k = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
  *   required
  * />
  */
-function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
+function TextInput({ label, value, onChange, type = "text", onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete, soundConfig, enableTypingSounds = false }) {
     const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
+    const { handlers, playSound } = useComponentSound(soundConfig);
+    const prevValueRef = React.useRef(value);
     const getContainerClassName = () => {
         const classes = [styles$k.textInput];
         if (success)
@@ -754,7 +1301,29 @@ function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, pla
             classes.push(styles$k.withAction);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$k.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$k.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$k.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$k.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
+    React.useEffect(() => {
+        prevValueRef.current = value;
+    }, [value]);
+    return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$k.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$k.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
+                            const newValue = e.target.value;
+                            const oldValue = prevValueRef.current;
+                            onChange(newValue);
+                            // Play typing sounds if enabled
+                            if (enableTypingSounds || soundConfig?.onClick) {
+                                if (newValue.length > oldValue.length) {
+                                    playSound('type');
+                                }
+                                else if (newValue.length < oldValue.length) {
+                                    playSound('delete');
+                                }
+                            }
+                            if (error && soundConfig?.onError) {
+                                playSound(typeof soundConfig.onError === 'string' ? soundConfig.onError : 'error');
+                            }
+                        }, onBlur: onBlur, placeholder: placeholder, className: error ? styles$k.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$k.actionButton, onClick: () => {
+                            handlers.onClick?.();
+                            actionButton.onClick();
+                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
 }
 
 var styles$j = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
@@ -769,12 +1338,14 @@ var styles$j = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  * Supports both text labels and icons for each option.
  *
  * @example
- * // Basic toggle with labels
+ * // Basic toggle with labels and sound theme
  * <Toggle
  *   isOn={darkMode}
  *   onToggle={setDarkMode}
  *   leftLabel="Light"
  *   rightLabel="Dark"
+ *   soundTheme="cozy"
+ *   enableCelebration={true}
  * />
  *
  * @example
@@ -801,7 +1372,14 @@ var styles$j = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  * @returns {JSX.Element} The rendered Toggle component
  */
 function Toggle(props) {
-    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
+    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style, soundConfig, soundTheme, enableCelebration = false } = props;
+    const leftButtonRef = React.useRef(null);
+    const rightButtonRef = React.useRef(null);
+    const { handlers, playSound, triggerCelebration } = useComponentSound({
+        ...soundConfig,
+        onToggle: soundConfig?.onToggle ?? 'toggle',
+        onHover: soundConfig?.onHover ?? 'hover'
+    }, { });
     // Ensure content stays centered by merging styles
     const buttonStyle = {
         display: 'flex',
@@ -809,7 +1387,39 @@ function Toggle(props) {
         justifyContent: 'center',
         ...style
     };
-    return (jsxRuntime.jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
+    return (jsxRuntime.jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { ref: leftButtonRef, className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
+                    const element = leftButtonRef.current;
+                    if (!isOn) {
+                        // Already on left, celebration!
+                        if (enableCelebration) {
+                            triggerCelebration(element || undefined);
+                        }
+                        else {
+                            playSound('boop', element || undefined);
+                        }
+                    }
+                    else {
+                        // Switching to left
+                        playSound('toggle', element || undefined);
+                    }
+                    onToggle(false);
+                }, onMouseEnter: () => handlers.onMouseEnter?.(leftButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
+                    const element = rightButtonRef.current;
+                    if (isOn) {
+                        // Already on right, celebration!
+                        if (enableCelebration) {
+                            triggerCelebration(element || undefined);
+                        }
+                        else {
+                            playSound('ding', element || undefined);
+                        }
+                    }
+                    else {
+                        // Switching to right  
+                        playSound('success', element || undefined);
+                    }
+                    onToggle(true);
+                }, onMouseEnter: () => handlers.onMouseEnter?.(rightButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
 }
 
 var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
@@ -843,10 +1453,76 @@ var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"Nu
  *   icon="📦"
  * />
  *
+ * @example
+ * // With custom styles
+ * <NumberStepper
+ *   value={volume}
+ *   onChange={setVolume}
+ *   min={0}
+ *   max={100}
+ *   label="Volume"
+ *   icon="🔊"
+ *   customStyles={{
+ *     container: {
+ *       background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ *       padding: '20px',
+ *       borderRadius: '16px',
+ *     },
+ *     label: { color: 'white', fontWeight: 'bold' },
+ *     button: {
+ *       background: 'rgba(255,255,255,0.2)',
+ *       color: 'white',
+ *     },
+ *     buttonHover: {
+ *       background: 'rgba(255,255,255,0.3)',
+ *     },
+ *     value: {
+ *       color: 'white',
+ *       fontSize: '24px',
+ *       fontWeight: 'bold',
+ *     },
+ *   }}
+ * />
+ *
+ * @example
+ * // Custom variant with horizontal layout
+ * <NumberStepper
+ *   value={discount}
+ *   onChange={setDiscount}
+ *   min={0}
+ *   max={100}
+ *   step={5}
+ *   label="Discount %"
+ *   icon="🏷️"
+ *   variant="custom"
+ *   customStyles={{
+ *     container: {
+ *       display: 'flex',
+ *       alignItems: 'center',
+ *       gap: '16px',
+ *     },
+ *     header: { flex: 1, marginBottom: 0 },
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom buttons
+ * <NumberStepper
+ *   value={rating}
+ *   onChange={setRating}
+ *   min={1}
+ *   max={5}
+ *   customButtons={{
+ *     decrement: <span>👎</span>,
+ *     increment: <span>👍</span>,
+ *   }}
+ * />
+ *
  * @param {NumberStepperProps} props - The props for the NumberStepper component
  * @returns {JSX.Element} The rendered NumberStepper component
  */
-const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', customStyles = {}, customButtons = {}, hideLimits = false, layout = 'horizontal', }) => {
+const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', customStyles = {}, customButtons = {}, hideLimits = false, layout = 'horizontal', soundConfig }) => {
+    const { handlers, playSound } = useComponentSound(soundConfig);
     const [isIncrementing, setIsIncrementing] = React.useState(false);
     const [isDecrementing, setIsDecrementing] = React.useState(false);
     const [displayValue, setDisplayValue] = React.useState(value);
@@ -856,19 +1532,21 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
     const handleIncrement = React.useCallback(() => {
         if (disabled || value >= max)
             return;
+        playSound('click');
         const newValue = Math.min(value + step, max);
         onChange(newValue);
         setIsIncrementing(true);
         setTimeout(() => setIsIncrementing(false), 200);
-    }, [value, onChange, max, step, disabled]);
+    }, [value, onChange, max, step, disabled, playSound]);
     const handleDecrement = React.useCallback(() => {
         if (disabled || value <= min)
             return;
+        playSound('click');
         const newValue = Math.max(value - step, min);
         onChange(newValue);
         setIsDecrementing(true);
         setTimeout(() => setIsDecrementing(false), 200);
-    }, [value, onChange, min, step, disabled]);
+    }, [value, onChange, min, step, disabled, playSound]);
     const handleKeyDown = React.useCallback((e) => {
         if (!allowKeyboard || disabled)
             return;
@@ -940,13 +1618,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
     const [isButtonHovered, setIsButtonHovered] = React.useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
-                            ...customStyles.button,
-                            ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
-                        }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$i.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
-                            ...customStyles.button,
-                            ...(isButtonHovered === 'increment' && customStyles.buttonHover)
-                        }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }), !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    const stepperContent = (jsxRuntime.jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
+                    ...customStyles.button,
+                    ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
+                }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$i.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
+                    ...customStyles.button,
+                    ...(isButtonHovered === 'increment' && customStyles.buttonHover)
+                }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
+    // For custom variant with horizontal layout, render differently
+    if (variant === 'custom' && (label || icon)) {
+        return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$i.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    }
+    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
 };
 
 var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
@@ -985,7 +1668,8 @@ var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
  * @param {ToggleButtonProps} props - The props for the ToggleButton component
  * @returns {JSX.Element} The rendered ToggleButton component
  */
-const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, }) => {
+const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, soundConfig }) => {
+    const { handlers, playSound } = useComponentSound(soundConfig);
     const buttonClasses = [
         styles$h.button,
         styles$h[size],
@@ -1059,7 +1743,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
             '--toggle-bg-color': active ? `${color}20` : 'transparent'
         })
     };
-    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$h.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$h.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$h.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
+    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, onClick: () => {
+            playSound('toggle');
+            onClick();
+        }, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$h.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$h.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$h.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
 var styles$g = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
@@ -1098,7 +1785,8 @@ var styles$g = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_la
  *   colorFunction={(val) => `hsl(${val * 24}, 70%, 50%)`}
  * />
  */
-function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValue = false, valueFormatter, labels = [], config = {}, disabled = false, className = '', style = {}, loading = false, colorFunction, showTooltip = false, tooltipContent }) {
+function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValue = false, valueFormatter, labels = [], config = {}, disabled = false, className = '', style = {}, loading = false, colorFunction, showTooltip = false, tooltipContent, soundConfig }) {
+    const { handlers, playSound } = useComponentSound(soundConfig);
     const [isDragging, setIsDragging] = React.useState(false);
     const [showTooltipState, setShowTooltipState] = React.useState(false);
     const sliderRef = React.useRef(null);
@@ -1125,6 +1813,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
         if (disabled || loading)
             return;
         const newValue = Number(e.target.value);
+        playSound('click');
         onChange(newValue);
     };
     // Handle mouse events for enhanced interactions
@@ -1167,7 +1856,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                                 damping: 30
                             }, whileHover: {
                                 boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
-                            } }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, className: styles$g.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.thumb, style: {
+                            } }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$g.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.thumb, style: {
                             left: `${percentage}%`,
                             backgroundColor: dynamicColor,
                             borderColor: colors.thumb || dynamicColor
@@ -1660,7 +2349,7 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
 
 var styles$b = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
 
-function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
+function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false, className = "" }) {
     const [showPicker, setShowPicker] = React.useState(false);
     const formatTime24 = (time) => {
         if (!time)
@@ -1720,6 +2409,8 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
             classes.push(styles$b.loading);
         if (disabled)
             classes.push(styles$b.disabled);
+        if (className)
+            classes.push(className);
         return classes.join(' ');
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$b.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$b.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$b.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$b.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsxRuntime.jsx("button", { type: "button", onClick: handleClockClick, className: styles$b.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsxRuntime.jsx(FiClock, { size: 20 }) })] })] }), jsxRuntime.jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));