@stfrigerio/sito-template 0.1.27 → 0.1.28

package/dist/index.esm.js

@@ -32,6 +32,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 = useRef({});
+    const debounceMs = options?.debounceMs || 50;
+    useEffect(() => {
+        if (options?.enabled !== undefined) {
+            soundManager.setEnabled(options.enabled);
+        }
+        if (options?.volume !== undefined) {
+            soundManager.setVolume(options.volume);
+        }
+    }, [options?.enabled, options?.volume]);
+    const playSound = 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 = useCallback(() => soundManager.isEnabled(), []);
+    const setEnabled = useCallback((enabled) => soundManager.setEnabled(enabled), []);
+    const setVolume = 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
  *
@@ -71,7 +592,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],
@@ -80,7 +602,15 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         loading && styles$r.loading,
         className
     ].filter(Boolean).join(' ');
-    return (jsxs(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 && jsx("span", { className: styles$r.spinner }), iconLeft && jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$r.iconRight, children: iconRight })] }));
+    const handleClick = (e) => {
+        handlers.onClick?.();
+        onClick?.(e);
+    };
+    const handleMouseEnter = (e) => {
+        handlers.onMouseEnter?.();
+        onMouseEnter?.(e);
+    };
+    return (jsxs(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 && jsx("span", { className: styles$r.spinner }), iconLeft && jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && 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"};
@@ -206,14 +736,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 = useRef(null);
+    const { playSound } = useComponentSound(soundConfig);
     useEffect(() => {
         if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsxs("label", { className: styles$p.checkboxLabel, children: [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 && jsx("span", { className: styles$p.checkboxText, children: label })] }));
+    return (jsxs("label", { className: styles$p.checkboxLabel, children: [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 && jsx("span", { className: styles$p.checkboxText, children: label })] }));
 };
 
 var DefaultContext = {
@@ -387,8 +924,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 = useRef(null);
+    const { handlers, playSound } = useComponentSound(soundConfig);
     const handleTextChange = (textValue) => {
         // Auto-format as user types
         let formatted = textValue.replace(/[^\d/]/g, '');
@@ -413,6 +951,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
@@ -446,7 +985,7 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
             classes.push(styles$o.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$o.label, children: label }), jsxs("div", { className: styles$o.inputWrapper, children: [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 }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$o.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
+    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$o.label, children: label }), jsxs("div", { className: styles$o.inputWrapper, children: [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 }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), 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"};
@@ -605,7 +1144,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)
@@ -616,7 +1156,10 @@ function SelectInput({ label, value, onChange, options, placeholder = "Select...
             classes.push(styles$m.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$m.selectWrapper, children: [jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
+    return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$m.selectWrapper, children: [jsxs("select", { value: value, onChange: e => {
+                            playSound('click');
+                            onChange(e.target.value);
+                        }, disabled: disabled || loading, required: required, ...handlers, children: [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 (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
@@ -721,8 +1264,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)
@@ -735,7 +1280,29 @@ function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, pla
             classes.push(styles$k.withAction);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$k.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$k.inputIcon, children: icon }), 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 && (jsx("button", { type: "button", className: styles$k.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
+    React.useEffect(() => {
+        prevValueRef.current = value;
+    }, [value]);
+    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$k.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$k.inputIcon, children: icon }), 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 && (jsx("button", { type: "button", className: styles$k.actionButton, onClick: () => {
+                            handlers.onClick?.();
+                            actionButton.onClick();
+                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (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"};
@@ -750,12 +1317,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
@@ -782,7 +1351,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 = useRef(null);
+    const rightButtonRef = 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',
@@ -790,7 +1366,39 @@ function Toggle(props) {
         justifyContent: 'center',
         ...style
     };
-    return (jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
+    return (jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxs(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: [jsx(motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxs(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: [jsx(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"};
@@ -892,7 +1500,8 @@ var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"Nu
  * @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] = useState(false);
     const [isDecrementing, setIsDecrementing] = useState(false);
     const [displayValue, setDisplayValue] = useState(value);
@@ -902,19 +1511,21 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
     const handleIncrement = 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 = 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 = useCallback((e) => {
         if (!allowKeyboard || disabled)
             return;
@@ -986,7 +1597,7 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
     const [isButtonHovered, setIsButtonHovered] = useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    const stepperContent = (jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(motion.button, { className: styles$i.button, style: {
+    const stepperContent = (jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(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: 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) }) }), jsx(motion.button, { className: styles$i.button, style: {
@@ -1036,7 +1647,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],
@@ -1110,7 +1722,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
             '--toggle-bg-color': active ? `${color}20` : 'transparent'
         })
     };
-    return (jsxs(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: [jsx(motion.div, { className: styles$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$h.content, children: [icon && (jsx(motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$h.icon, children: icon })) : (jsx("div", { className: styles$h.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$h.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(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 (jsxs(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: [jsx(motion.div, { className: styles$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$h.content, children: [icon && (jsx(motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$h.icon, children: icon })) : (jsx("div", { className: styles$h.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$h.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(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"};
@@ -1149,7 +1764,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] = useState(false);
     const [showTooltipState, setShowTooltipState] = useState(false);
     const sliderRef = useRef(null);
@@ -1176,6 +1792,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
@@ -1218,7 +1835,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)`
-                            } }) }), 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 }), jsx(motion.div, { className: styles$g.thumb, style: {
+                            } }) }), 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 }), jsx(motion.div, { className: styles$g.thumb, style: {
                             left: `${percentage}%`,
                             backgroundColor: dynamicColor,
                             borderColor: colors.thumb || dynamicColor