@therealtinhtute/baroiplayer 1.0.6 → 1.0.7

package/src/components/enhanced/media-player-enhanced.js

@@ -1,250 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { useMediaContext, useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context";
-import { cn } from "../../lib/utils";
-// Custom hook for auto-hide controls
-function useAutoHideControls(autoHide, delay, showOnHover, showOnTouch) {
-    const [showControls, setShowControls] = React.useState(true);
-    const [isHovering, setIsHovering] = React.useState(false);
-    const [isTouching, setIsTouching] = React.useState(false);
-    const timeoutRef = React.useRef(null);
-    const resetTimeout = React.useCallback(() => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        if (autoHide) {
-            timeoutRef.current = setTimeout(() => {
-                if (!isHovering && !isTouching) {
-                    setShowControls(false);
-                }
-            }, delay);
-        }
-    }, [autoHide, delay, isHovering, isTouching]);
-    const showControlsTemporarily = React.useCallback(() => {
-        setShowControls(true);
-        resetTimeout();
-    }, [resetTimeout]);
-    React.useEffect(() => {
-        if (autoHide) {
-            resetTimeout();
-        }
-        else {
-            setShowControls(true);
-        }
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, [autoHide, resetTimeout]);
-    const handleMouseEnter = React.useCallback(() => {
-        if (showOnHover) {
-            setIsHovering(true);
-            setShowControls(true);
-        }
-    }, [showOnHover]);
-    const handleMouseLeave = React.useCallback(() => {
-        if (showOnHover) {
-            setIsHovering(false);
-            resetTimeout();
-        }
-    }, [showOnHover, resetTimeout]);
-    const handleTouchStart = React.useCallback(() => {
-        if (showOnTouch) {
-            setIsTouching(true);
-            showControlsTemporarily();
-        }
-    }, [showOnTouch, showControlsTemporarily]);
-    const handleTouchEnd = React.useCallback(() => {
-        if (showOnTouch) {
-            setIsTouching(false);
-            resetTimeout();
-        }
-    }, [showOnTouch, resetTimeout]);
-    return {
-        showControls,
-        showControlsTemporarily,
-        handleMouseEnter,
-        handleMouseLeave,
-        handleTouchStart,
-        handleTouchEnd
-    };
-}
-// Custom hook for touch gestures
-function useTouchGestures(enabled) {
-    const dispatch = useMediaDispatch();
-    const isPlaying = useMediaSelector(state => state.isPlaying);
-    const currentTime = useMediaSelector(state => state.currentTime);
-    const duration = useMediaSelector(state => state.duration);
-    const volume = useMediaSelector(state => state.volume);
-    const [touchStart, setTouchStart] = React.useState(null);
-    const [isDoubleTap, setIsDoubleTap] = React.useState(false);
-    const handleTouchStart = React.useCallback((e) => {
-        if (!enabled)
-            return;
-        const touch = e.touches[0];
-        if (!touch)
-            return;
-        const now = Date.now();
-        if (touchStart && now - touchStart.time < 300) {
-            setIsDoubleTap(true);
-            // Double tap to play/pause
-            dispatch({
-                type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-            });
-        }
-        else {
-            setTouchStart({
-                x: touch.clientX,
-                y: touch.clientY,
-                time: now
-            });
-            setIsDoubleTap(false);
-        }
-    }, [enabled, touchStart, isPlaying, dispatch]);
-    const handleTouchMove = React.useCallback((e) => {
-        if (!enabled || !touchStart || isDoubleTap)
-            return;
-        const touch = e.touches[0];
-        if (!touch)
-            return;
-        const deltaX = touch.clientX - touchStart.x;
-        const deltaY = touch.clientY - touchStart.y;
-        // Horizontal swipe for seeking
-        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
-            const seekAmount = (deltaX / window.innerWidth) * 30; // 30 seconds max
-            const newTime = Math.max(0, Math.min(duration, currentTime + seekAmount));
-            dispatch({
-                type: MediaActionTypes.SEEK,
-                detail: newTime
-            });
-        }
-        // Vertical swipe for volume (right side of screen)
-        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50 && touchStart.x > window.innerWidth / 2) {
-            const volumeChange = -(deltaY / window.innerHeight) * 1; // Full range
-            const newVolume = Math.max(0, Math.min(1, volume + volumeChange));
-            dispatch({
-                type: MediaActionTypes.SET_VOLUME,
-                detail: newVolume
-            });
-        }
-    }, [enabled, touchStart, isDoubleTap, duration, currentTime, volume, dispatch]);
-    const handleTouchEnd = React.useCallback(() => {
-        if (!enabled)
-            return;
-        // Reset touch state after a delay to allow for double tap detection
-        setTimeout(() => {
-            setTouchStart(null);
-            setIsDoubleTap(false);
-        }, 300);
-    }, [enabled]);
-    return {
-        handleTouchStart,
-        handleTouchMove,
-        handleTouchEnd
-    };
-}
-export const EnhancedMediaPlayer = function EnhancedMediaPlayer({ children, className, autoHide = true, autoHideDelay = 3000, showControlsOnHover = true, showControlsOnTouch = true, enableKeyboardControls = true, enableTouchGestures = true, onPlay, onPause, onTimeUpdate, onVolumeChange, onFullscreenChange }) {
-    const context = useMediaContext();
-    const dispatch = useMediaDispatch();
-    // State selectors with memoization
-    const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []));
-    const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []));
-    const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []));
-    const volume = useMediaSelector(React.useCallback(state => state.volume, []));
-    const error = useMediaSelector(React.useCallback(state => state.error, []));
-    // Custom hooks
-    const { showControls, showControlsTemporarily, handleMouseEnter, handleMouseLeave, handleTouchStart: handleControlsTouch, handleTouchEnd: handleControlsTouchEnd } = useAutoHideControls(autoHide, autoHideDelay, showControlsOnHover, showControlsOnTouch);
-    const { handleTouchStart: handleGestureStart, handleTouchMove: handleGestureMove, handleTouchEnd: handleGestureEnd } = useTouchGestures(enableTouchGestures);
-    // Combine touch handlers
-    const handleTouchStart = React.useCallback((e) => {
-        handleControlsTouch();
-        handleGestureStart(e);
-    }, [handleControlsTouch, handleGestureStart]);
-    const handleTouchEnd = React.useCallback(() => {
-        handleControlsTouchEnd();
-        handleGestureEnd();
-    }, [handleControlsTouchEnd, handleGestureEnd]);
-    // Event handlers with memoization
-    const handleClick = React.useCallback(() => {
-        showControlsTemporarily();
-    }, [showControlsTemporarily]);
-    // Keyboard controls
-    React.useEffect(() => {
-        if (!enableKeyboardControls)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-                return;
-            }
-            switch (e.code) {
-                case 'Space':
-                case 'KeyK':
-                    e.preventDefault();
-                    dispatch({
-                        type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-                    });
-                    break;
-                case 'KeyF':
-                    e.preventDefault();
-                    dispatch({
-                        type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
-                    });
-                    break;
-                case 'KeyM':
-                    e.preventDefault();
-                    dispatch({ type: MediaActionTypes.TOGGLE_MUTE });
-                    break;
-                case 'ArrowLeft':
-                    e.preventDefault();
-                    dispatch({
-                        type: MediaActionTypes.SEEK,
-                        detail: Math.max(0, currentTime - 10)
-                    });
-                    break;
-                case 'ArrowRight':
-                    e.preventDefault();
-                    dispatch({
-                        type: MediaActionTypes.SEEK,
-                        detail: currentTime + 10
-                    });
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    dispatch({
-                        type: MediaActionTypes.SET_VOLUME,
-                        detail: Math.min(1, volume + 0.1)
-                    });
-                    break;
-                case 'ArrowDown':
-                    e.preventDefault();
-                    dispatch({
-                        type: MediaActionTypes.SET_VOLUME,
-                        detail: Math.max(0, volume - 0.1)
-                    });
-                    break;
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [enableKeyboardControls, dispatch, isPlaying, isFullscreen, currentTime, volume]);
-    // Event callbacks
-    React.useEffect(() => {
-        if (isPlaying)
-            onPlay?.();
-        else
-            onPause?.();
-    }, [isPlaying, onPlay, onPause]);
-    React.useEffect(() => {
-        onTimeUpdate?.(currentTime);
-    }, [currentTime, onTimeUpdate]);
-    React.useEffect(() => {
-        onVolumeChange?.(volume);
-    }, [volume, onVolumeChange]);
-    React.useEffect(() => {
-        onFullscreenChange?.(isFullscreen);
-    }, [isFullscreen, onFullscreenChange]);
-    return (_jsx("div", { ref: context.rootRef, className: cn("relative isolate flex flex-col overflow-hidden rounded-lg bg-black outline-none", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", isFullscreen && "fixed inset-0 z-50 rounded-none", className), "data-state": isFullscreen ? "fullscreen" : "inline", "data-disabled": error ? "" : undefined, "data-controls-visible": showControls ? "" : undefined, tabIndex: 0, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchMove: handleGestureMove, onTouchEnd: handleTouchEnd, onClick: handleClick, children: children }));
-};
-EnhancedMediaPlayer.displayName = "EnhancedMediaPlayer";

package/src/components/examples/basic-video-player.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaPlayerRoot } from "../media-player-root";
-import { MediaPlayerVideo } from "../media-player-video";
-import { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
-import { MediaPlayerPlay } from "../media-player-play";
-import { MediaPlayerSeek } from "../media-player-seek";
-import { MediaPlayerVolume } from "../media-player-volume";
-import { MediaPlayerTime } from "../media-player-time";
-import { MediaPlayerFullscreen } from "../media-player-fullscreen";
-import { MediaPlayerLoading } from "../media-player-loading";
-import { MediaPlayerError } from "../media-player-error";
-export function BasicVideoPlayer({ src, poster, className }) {
-    return (_jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, crossOrigin: "anonymous", playsInline: true }), _jsx(MediaPlayerLoading, {}), _jsx(MediaPlayerError, {}), _jsx(MediaPlayerControlsOverlay, {}), _jsxs(MediaPlayerControls, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MediaPlayerPlay, {}), _jsx(MediaPlayerVolume, {}), _jsx(MediaPlayerTime, { variant: "current" })] }), _jsx("div", { className: "flex-1 px-2", children: _jsx(MediaPlayerSeek, {}) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MediaPlayerTime, { variant: "duration" }), _jsx(MediaPlayerFullscreen, {})] })] })] }));
-}
-BasicVideoPlayer.displayName = "BasicVideoPlayer";

package/src/components/examples/custom-controls-example.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaPlayer } from "../media-player";
-import { FullscreenButton } from "../ui/fullscreen-button";
-import { PlayButton } from "../ui/play-button";
-import { SeekBar } from "../ui/seek-bar";
-import { TimeDisplay } from "../ui/time-display";
-import { VolumeControl } from "../ui/volume-control";
-export function CustomControlsExample({ src, poster, className }) {
-    return (_jsx(MediaPlayer, { src: src, customControls: true, showControls: false, className: className, children: ({ state, controls }) => (_jsxs("div", { className: "absolute inset-0 flex flex-col justify-end", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" }), _jsxs("div", { className: "relative z-10 space-y-3 p-4", children: [_jsx("div", { className: "w-full", children: _jsx(SeekBar, { currentTime: state.currentTime, duration: state.duration, onSeek: controls.seek, className: "w-full" }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, size: "lg" }), _jsx(VolumeControl, { volume: state.volume, isMuted: state.isMuted, onVolumeChange: controls.setVolume, onToggleMute: controls.toggleMute }), _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx(FullscreenButton, { isFullscreen: state.isFullscreen, onToggle: controls.toggleFullscreen }) })] })] })] })) }));
-}
-CustomControlsExample.displayName = "CustomControlsExample";

package/src/components/examples/enhanced-controls-example.js

@@ -1,18 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaProvider } from "../../context/media-provider";
-import { MediaPlayerRoot } from "../media-player-root";
-import { MediaPlayerVideo } from "../media-player-video";
-import { EnhancedControlBar, EnhancedPlayButton, EnhancedSeekBar, EnhancedBackwardButton, EnhancedForwardButton, EnhancedVolumeControl, EnhancedTimeDisplay } from "../enhanced/enhanced-controls";
-// Complete example with all enhanced controls
-export function EnhancedControlsExample({ src, poster, className }) {
-    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsx(EnhancedControlBar, { className: "absolute right-0 bottom-0 left-0", showSkipButtons: true, showVolumeControl: true, showTimeDisplay: true, playButtonSize: "xl", skipButtonSize: "md", skipTime: 10 })] }) }));
-}
-// Example with individual components for custom layouts
-export function CustomEnhancedControlsExample({ src, poster, className }) {
-    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsxs("div", { className: "absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(EnhancedSeekBar, { className: "mb-4" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(EnhancedBackwardButton, { skipTime: 15, size: "md" }), _jsx(EnhancedPlayButton, { size: "xl" }), _jsx(EnhancedForwardButton, { skipTime: 15, size: "md" }), _jsx(EnhancedVolumeControl, {})] }), _jsxs("div", { className: "flex items-center gap-2 font-mono text-sm text-white", children: [_jsx(EnhancedTimeDisplay, { variant: "current" }), _jsx("span", { className: "text-white/60", children: "/" }), _jsx(EnhancedTimeDisplay, { variant: "duration" })] })] })] })] }) }));
-}
-// Minimal example with just skip buttons
-export function SkipButtonsOnlyExample({ src, poster, className }) {
-    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-4 left-1/2 transform", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(EnhancedBackwardButton, { skipTime: 10, size: "lg" }), _jsx(EnhancedPlayButton, { size: "xl" }), _jsx(EnhancedForwardButton, { skipTime: 10, size: "lg" })] }) })] }) }));
-}

package/src/components/examples/enhanced-media-player-example.js

@@ -1,13 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { MediaPlayer } from "../media-player";
-import { PlayButton } from "../ui/play-button";
-import { SeekBar } from "../ui/seek-bar";
-import { TimeDisplay } from "../ui/time-display";
-import { VolumeControl } from "../ui/volume-control";
-import { cn } from "../../lib/utils";
-export function EnhancedMediaPlayerExample({ src, className, title = "Sample Media", description = "Demonstrating the new BaroiPlayer design system" }) {
-    const [isControlsVisible, setIsControlsVisible] = useState(true);
-    return (_jsxs("div", { className: cn("mx-auto w-full max-w-4xl space-y-6", className), children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h2", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-xl", children: title }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: description })] }), _jsx("div", { className: cn("group relative", "hover:shadow-2xl hover:shadow-[color:var(--color-brand-primary)]/10", "transition-all duration-500 ease-out"), onMouseEnter: () => setIsControlsVisible(true), onMouseLeave: () => setIsControlsVisible(false), children: _jsx(MediaPlayer, { src: src, customControls: true, children: ({ state, controls }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("absolute inset-0 z-20 flex items-center justify-center", "transition-all duration-300", state.isLoading && "pointer-events-none"), children: _jsx("div", { className: cn("relative", "transition-all duration-300 ease-out", "hover:scale-105"), children: _jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, disabled: state.isLoading, size: "xl", className: cn("transform transition-all duration-300", !isControlsVisible && !state.isLoading && "scale-75 opacity-60", isControlsVisible && "scale-100 opacity-100") }) }) }), _jsxs("div", { className: cn("absolute right-0 bottom-0 left-0 z-30", "glass-strong border-[color:var(--media-border)]/30 border-t", "transition-all duration-300 ease-out", !isControlsVisible && "translate-y-full opacity-0", isControlsVisible && "translate-y-0 opacity-100"), children: [_jsx("div", { className: "-mt-2 px-4", children: _jsx(SeekBar, { currentTime: state.currentTime, duration: state.duration, buffered: state.buffered, onSeek: controls.seek, className: "w-full" }) }), _jsxs("div", { className: cn("flex items-center justify-between gap-4 p-4", "media-md:px-8 media-sm:px-6"), children: [_jsxs("div", { className: "flex items-center gap-3 media-sm:gap-4", children: [_jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, disabled: state.isLoading, size: "md" }), _jsx("div", { className: "media-sm:block hidden", children: _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration, className: "font-mono text-fluid-sm" }) })] }), _jsxs("div", { className: cn("media-md:block hidden flex-1 text-center", "space-y-1"), children: [_jsx("p", { className: "truncate font-medium text-[color:var(--media-text)] text-fluid-sm", children: title }), state.duration > 0 && (_jsxs("div", { className: "text-[color:var(--media-text-secondary)] text-xs", children: [Math.round((state.currentTime / state.duration) * 100), "% complete"] }))] }), _jsxs("div", { className: "flex items-center gap-3 media-sm:gap-4", children: [_jsx("div", { className: "media-sm:block hidden", children: _jsx(VolumeControl, { volume: state.volume, isMuted: state.isMuted, onVolumeChange: controls.setVolume, onToggleMute: controls.toggleMute, size: "md" }) }), _jsx("button", { onClick: controls.toggleFullscreen, className: cn("group glass-strong media-control relative", "size-10 touch-manipulation rounded-xl contain-layout", "bg-[color:var(--media-control-bg)] backdrop-blur-sm", "border border-[color:var(--media-border)]/30", "text-[color:var(--media-text)] transition-all duration-300", "hover:bg-[color:var(--media-control-hover)]", "hover:border-[color:var(--media-border)]/50", "hover:-translate-y-0.5 hover:scale-105", "active:translate-y-0 active:scale-100", "focus-ring"), "aria-label": "Enter fullscreen", children: _jsx("svg", { className: "m-auto size-5 transition-transform duration-200 group-hover:scale-110", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) })] })] }), _jsx("div", { className: "media-sm:hidden px-4 pb-3", children: _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration, className: "text-center font-mono text-sm" }) })] }), state.isLoading && (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-16 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-16 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-lg") })] }), _jsxs("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-fluid-base", children: ["Loading ", title, "..."] })] }) })), state.error && (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4", children: _jsx("svg", { className: "size-8 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 font-semibold text-fluid-lg", children: "Playback Error" }), _jsx("p", { className: "text-[color:var(--media-text-secondary)] text-fluid-sm", children: state.error })] }), _jsx("button", { onClick: () => window.location.reload(), className: cn("rounded-lg px-6 py-2 font-medium transition-all duration-200", "bg-[color:var(--color-brand-primary)] text-[color:var(--media-text)]", "hover:scale-105 hover:bg-[color:var(--color-brand-accent)]", "focus-ring active:scale-95"), children: "Try Again" })] }) }))] })) }) }), _jsxs("div", { className: "grid grid-cols-1 media-lg:grid-cols-3 media-sm:grid-cols-2 gap-4", children: [_jsxs("div", { className: "glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Modern Colors" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "OKLCH color space for vivid, accessible colors across all displays." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-primary)] shadow-sm" }), _jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-accent)] shadow-sm" }), _jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-highlight)] shadow-sm" })] })] }), _jsxs("div", { className: "glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Container Queries" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "Responsive design based on container size, not just viewport." }), _jsx("div", { className: "font-mono text-[color:var(--color-text-tertiary)] text-xs", children: "@container (min-width: 480px)" })] }), _jsxs("div", { className: "glass-strong media-lg:col-span-1 media-sm:col-span-2 space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Smooth Animations" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "Performance-optimized with CSS containment and modern easing." }), _jsx("div", { className: "h-1 w-8 animate-pulse rounded-full bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]" })] })] })] }));
-}

package/src/components/examples/loading-states-demo.js

@@ -1,41 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer";
-import { AnimateLoadingWrapper } from "../LoadingState";
-import { cn } from "../../lib/utils";
-export function LoadingStatesDemo() {
-    const [showCustomLoading, setShowCustomLoading] = useState(false);
-    const [loadingVariant, setLoadingVariant] = useState("animate");
-    // Custom loading component example
-    const CustomLoadingComponent = ({ context }) => (_jsxs("div", { className: "flex flex-col items-center gap-4 text-white", children: [_jsx("div", { className: "h-16 w-16 animate-pulse rounded-full bg-gradient-to-r from-cyan-500 to-blue-500" }), _jsxs("p", { className: "font-medium text-sm", children: ["Custom ", context, " loader"] })] }));
-    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-6xl space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "mb-4 font-bold text-3xl text-white", children: "Loading States Demo" }), _jsx("p", { className: "mb-6 text-gray-400", children: "Demonstrating the new AnimateLoading integration with context-aware loading text" })] }), _jsxs("div", { className: "mb-8 grid grid-cols-1 gap-6 md:grid-cols-3", children: [_jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "initial" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Initial Loading" })] }), _jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "seeking" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Seeking" })] }), _jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "buffering" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Buffering" })] })] }), _jsxs("div", { className: "mb-6 flex justify-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-sm text-white", children: "Loading Variant:" }), _jsxs("select", { value: loadingVariant, onChange: (e) => setLoadingVariant(e.target.value), className: "rounded border border-gray-700 bg-gray-800 px-3 py-1 text-white", children: [_jsx("option", { value: "animate", children: "Animate (Default)" }), _jsx("option", { value: "spinner", children: "Spinner" }), _jsx("option", { value: "dots", children: "Dots" }), _jsx("option", { value: "skeleton", children: "Skeleton" })] })] }), _jsxs("button", { onClick: () => setShowCustomLoading(!showCustomLoading), className: cn("rounded-lg px-4 py-2 transition-colors", showCustomLoading
-                                ? "bg-cyan-600 text-white"
-                                : "bg-gray-800 text-gray-300 hover:bg-gray-700"), children: [showCustomLoading ? "Using Custom" : "Use Custom", " Loading"] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "font-semibold text-white text-xl", children: "Live Player Example" }), _jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-black", children: _jsx(SimpleMinimalPlayer, { src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg", crossOrigin: "anonymous", showLoadingState: true, loadingComponent: showCustomLoading ? CustomLoadingComponent : undefined, loadingProps: {
-                                    variant: showCustomLoading ? undefined : loadingVariant,
-                                    size: "sm",
-                                    message: showCustomLoading ? undefined : "Custom message..."
-                                } }) }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-4", children: [_jsx("h3", { className: "mb-2 font-medium text-white", children: "Features:" }), _jsxs("ul", { className: "space-y-1 text-gray-300 text-sm", children: [_jsx("li", { children: "\u2022 AnimateLoading from UI package as default" }), _jsx("li", { children: "\u2022 Context-aware loading messages" }), _jsx("li", { children: "\u2022 No blur backdrop for better performance" }), _jsx("li", { children: "\u2022 Customizable text size based on size prop" }), _jsx("li", { children: "\u2022 Support for custom loading components" }), _jsx("li", { children: "\u2022 Fallback to other variants (spinner, dots, skeleton)" })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-4", children: [_jsx("h3", { className: "mb-2 font-medium text-white", children: "Usage:" }), _jsx("pre", { className: "overflow-x-auto text-green-400 text-sm", children: _jsx("code", { children: `// Default with AnimateLoading
-<SimpleMinimalPlayer
-  src="video.mp4"
-  showLoadingState={true}
-/>
-
-// Custom loading component
-<SimpleMinimalPlayer
-  src="video.mp4"
-  loadingComponent={CustomLoader}
-  loadingProps={{
-    size: "sm",
-    message: "Please wait..."
-  }}
-/>
-
-// Use different variant
-<SimpleMinimalPlayer
-  src="video.mp4"
-  loadingProps={{
-    variant: "spinner"
-  }}
-/>` }) })] })] })] }) }));
-}

package/src/components/examples/react-19-demo.js

@@ -1,104 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { MediaProvider } from "../../context/media-provider";
-import { MediaPlayerRoot } from "../media-player-root";
-import { MediaPlayerVideo } from "../media-player-video";
-import { MediaPlayerControls } from "../media-player-controls";
-import { MediaPlayerPlay } from "../media-player-play";
-import { MediaPlayerVolume } from "../media-player-volume";
-import { MediaPlayerTime } from "../media-player-time";
-import { MediaPlayerSeek } from "../media-player-seek";
-import { MediaPlayerFullscreen } from "../media-player-fullscreen";
-import { EnhancedMediaWrapper, MediaLoading, useMediaConcurrent, useMediaPerformance } from "../media-suspense";
-import { useEnhancedMediaState } from "../../hooks/use-media-state";
-import { useMediaActions } from "../../hooks/use-media-actions";
-import { useMediaOptimistic } from "../../hooks/use-media-optimistic";
-import { useMediaErrorHandler } from "../../context/error-handling";
-import { useOptimisticMediaSelector } from "../../context/media-context";
-import { cn } from "../../lib/utils";
-export function React19MediaPlayerDemo({ src, poster, className, mediaId = "react-19-demo" }) {
-    return (_jsx(EnhancedMediaWrapper, { className: className, priority: "high", loadingFallback: _jsx(MediaLoading, { variant: "skeleton", size: "lg" }), errorFallback: ErrorFallback, children: _jsx(MediaProvider, { mediaId: mediaId, useEnhancedStore: true, enableOptimisticUpdates: true, enableErrorRecovery: true, persistenceConfig: {
-                userPreferences: true,
-                sessionState: true,
-                debounceMs: 300
-            }, retryConfig: {
-                maxRetries: 3,
-                exponentialBackoff: true
-            }, children: _jsx(MediaPlayerContent, { src: src, poster: poster }) }) }));
-}
-// Internal content component with React 19 hooks
-function MediaPlayerContent({ src, poster }) {
-    // React 19 enhanced state management
-    const mediaState = useEnhancedMediaState();
-    const { isLoading: actionLoading, errorMessage, ...actions } = useMediaActions(mediaState.state // Type assertion for store
-    );
-    // React 19 optimistic updates
-    const optimisticState = useMediaOptimistic(mediaState.state);
-    // React 19 concurrent features
-    const { isPending, updateWithTransition } = useMediaConcurrent();
-    // Performance monitoring
-    const { metrics, recordRenderTime } = useMediaPerformance();
-    // Error handling
-    const { errors, clearError } = useMediaErrorHandler();
-    // Record render performance
-    React.useEffect(() => {
-        const start = performance.now();
-        return () => recordRenderTime(start);
-    }, [recordRenderTime]);
-    // Optimistic selectors for immediate UI feedback
-    const isPlaying = useOptimisticMediaSelector(state => state.isPlaying);
-    const volume = useOptimisticMediaSelector(state => state.volume);
-    const currentTime = useOptimisticMediaSelector(state => state.currentTime);
-    const duration = useOptimisticMediaSelector(state => state.duration);
-    const isFullscreen = useOptimisticMediaSelector(state => state.isFullscreen);
-    // Enhanced action handlers with React 19 features
-    const handlePlayPause = async () => {
-        await updateWithTransition(async () => {
-            await optimisticState.togglePlayPause();
-        });
-    };
-    const handleVolumeChange = async (newVolume) => {
-        await optimisticState.setVolumeOptimistic(newVolume);
-    };
-    const handleSeek = async (time) => {
-        await optimisticState.seekOptimistic(time);
-    };
-    const handleFullscreenToggle = async () => {
-        await optimisticState.toggleFullscreenOptimistic();
-    };
-    return (_jsxs(MediaPlayerRoot, { className: cn("group relative overflow-hidden rounded-lg", "border border-border bg-black shadow-lg", "transition-all duration-200", isPending && "opacity-75", // Visual feedback for pending transitions
-        actionLoading && "pointer-events-none"), enableGestures: true, enableMobileOptimizations: true, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, className: "aspect-video w-full object-contain" }), (actionLoading || isPending) && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20", children: _jsx(MediaLoading, { variant: "spinner", size: "lg", children: actionLoading ? "Processing..." : "Updating..." }) })), _jsx(MediaPlayerControls, { className: "absolute right-0 bottom-0 left-0", children: _jsxs("div", { className: "flex items-center gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(MediaPlayerPlay, { className: "text-white transition-colors hover:text-white/80" }), _jsx(MediaPlayerVolume, { className: "text-white" }), _jsx(MediaPlayerTime, { className: "min-w-[120px] font-mono text-sm text-white" }), _jsx("div", { className: "flex-1", children: _jsx(MediaPlayerSeek, { className: "w-full" }) }), _jsx(MediaPlayerFullscreen, { className: "text-white transition-colors hover:text-white/80" })] }) }), (errorMessage || errors.length > 0) && (_jsxs("div", { className: "absolute top-4 right-4 rounded-lg bg-destructive/90 px-3 py-2 text-destructive-foreground text-sm", children: [errorMessage || errors[0]?.message, _jsx("button", { onClick: () => clearError(errors[0] ? `${errors[0].action?.type}-${errors[0].timestamp}` : ''), className: "ml-2 underline hover:no-underline", children: "Dismiss" })] })), process.env.NODE_ENV === 'development' && (_jsx(PerformanceDebugPanel, { metrics: metrics, optimisticState: optimisticState, errors: errors }))] }));
-}
-// Error fallback component
-function ErrorFallback({ error, resetError }) {
-    return (_jsxs("div", { className: "flex min-h-[300px] flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-8", children: [_jsx("div", { className: "mb-2 font-semibold text-destructive text-xl", children: "React 19 Media Player Error" }), _jsx("div", { className: "mb-4 max-w-md text-center text-muted-foreground", children: error.message }), _jsx("button", { onClick: resetError, className: "rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90", children: "Retry Player" })] }));
-}
-// Performance debug panel (development only)
-function PerformanceDebugPanel({ metrics, optimisticState, errors }) {
-    const [isExpanded, setIsExpanded] = React.useState(false);
-    if (!isExpanded) {
-        return (_jsx("button", { onClick: () => setIsExpanded(true), className: "absolute top-4 left-4 rounded bg-blue-600 px-2 py-1 text-white text-xs", children: "Debug" }));
-    }
-    return (_jsxs("div", { className: "absolute top-4 left-4 max-w-sm rounded-lg bg-black/90 p-4 font-mono text-white text-xs", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "font-bold", children: "React 19 Debug" }), _jsx("button", { onClick: () => setIsExpanded(false), className: "text-white/60 hover:text-white", children: "\u00D7" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { children: ["Render Time: ", metrics.renderTime, "ms"] }), _jsxs("div", { children: ["Suspense Count: ", metrics.suspenseCount] }), _jsxs("div", { children: ["Error Count: ", metrics.errorCount] }), _jsxs("div", { children: ["Transition Count: ", metrics.transitionCount] }), _jsxs("div", { children: ["Has Optimistic: ", optimisticState.hasOptimisticUpdates ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Active Errors: ", errors.length] })] }), optimisticState.differences?.length > 0 && (_jsxs("div", { className: "mt-2 border-white/20 border-t pt-2", children: [_jsx("div", { className: "mb-1 font-bold", children: "Optimistic Diffs:" }), optimisticState.differences.map((diff, i) => (_jsxs("div", { className: "text-yellow-400", children: [diff.key, ": ", JSON.stringify(diff.optimistic), "(was: ", JSON.stringify(diff.actual), ")"] }, i)))] }))] }));
-}
-// Example usage component
-export function React19DemoExample() {
-    const [currentSrc, setCurrentSrc] = React.useState("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
-    const videoSources = [
-        {
-            src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-            title: "Big Buck Bunny",
-            poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
-        },
-        {
-            src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-            title: "Elephants Dream",
-            poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
-        }
-    ];
-    const currentVideo = videoSources.find(v => v.src === currentSrc);
-    return (_jsxs("div", { className: "mx-auto max-w-4xl space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "mb-2 font-bold text-3xl", children: "React 19 Enhanced Media Player" }), _jsx("p", { className: "text-muted-foreground", children: "Featuring useOptimistic, useActionState, Suspense, concurrent features, error handling, state persistence, and performance optimizations." })] }), _jsx("div", { className: "flex gap-4", children: videoSources.map((video) => (_jsx("button", { onClick: () => setCurrentSrc(video.src), className: cn("rounded-lg border px-4 py-2 transition-colors", currentSrc === video.src
-                        ? "border-primary bg-primary text-primary-foreground"
-                        : "border-border bg-background hover:border-primary/50"), children: video.title }, video.src))) }), _jsx(React19MediaPlayerDemo, { src: currentSrc, poster: currentVideo.poster, mediaId: `demo-${currentSrc}`, className: "w-full" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 text-sm md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "React 19 Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 useOptimistic for immediate UI feedback" }), _jsx("li", { children: "\u2705 useActionState for form-like actions" }), _jsx("li", { children: "\u2705 Automatic memoization via React compiler" }), _jsx("li", { children: "\u2705 Concurrent features with Suspense" }), _jsx("li", { children: "\u2705 Enhanced error boundaries" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Media Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 Optimistic play/pause/seek/volume" }), _jsx("li", { children: "\u2705 Automatic state persistence" }), _jsx("li", { children: "\u2705 Error recovery with retries" }), _jsx("li", { children: "\u2705 Touch gestures & mobile optimization" }), _jsx("li", { children: "\u2705 Performance monitoring" })] })] })] })] }));
-}

package/src/components/examples/volume-orientation-demo.js

@@ -1,31 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer";
-export function VolumeOrientationDemo() {
-    const [orientation, setOrientation] = useState("horizontal");
-    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-5xl space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "mb-4 font-bold text-3xl text-white", children: "Enhanced Volume Control Demo" }), _jsx("p", { className: "mb-6 text-gray-400", children: "Small gradient volume slider with horizontal/vertical orientation" }), _jsxs("div", { className: "mb-8 flex justify-center gap-4", children: [_jsx("button", { onClick: () => setOrientation("horizontal"), className: `rounded-lg px-4 py-2 transition-colors ${orientation === "horizontal"
-                                        ? "bg-cyan-600 text-white"
-                                        : "bg-gray-800 text-gray-400 hover:bg-gray-700"}`, children: "Horizontal (Default)" }), _jsx("button", { onClick: () => setOrientation("vertical"), className: `rounded-lg px-4 py-2 transition-colors ${orientation === "vertical"
-                                        ? "bg-cyan-600 text-white"
-                                        : "bg-gray-800 text-gray-400 hover:bg-gray-700"}`, children: "Vertical" })] })] }), _jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-black", children: _jsx(SimpleMinimalPlayer, { src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg", crossOrigin: "anonymous", className: "h-full w-full", volumeOrientation: orientation }) }), _jsxs("div", { className: "mt-8 grid gap-6 md:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg bg-gray-900 p-6", children: [_jsx("h3", { className: "mb-3 font-semibold text-lg text-white", children: "Horizontal Mode (Default)" }), _jsxs("ul", { className: "space-y-2 text-gray-400 text-sm", children: [_jsx("li", { children: "\u2022 Slider appears beside the volume button" }), _jsx("li", { children: "\u2022 Expands horizontally on hover" }), _jsx("li", { children: "\u2022 Cyan to blue gradient (4px height)" }), _jsx("li", { children: "\u2022 Smooth 300ms transition" }), _jsx("li", { children: "\u2022 White thumb appears on hover" })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-6", children: [_jsx("h3", { className: "mb-3 font-semibold text-lg text-white", children: "Vertical Mode" }), _jsxs("ul", { className: "space-y-2 text-gray-400 text-sm", children: [_jsx("li", { children: "\u2022 Slider appears above the volume button" }), _jsx("li", { children: "\u2022 Expands vertically on hover" }), _jsx("li", { children: "\u2022 Same gradient rotated 90\u00B0" }), _jsx("li", { children: "\u2022 Shows percentage value" }), _jsx("li", { children: "\u2022 Dark backdrop for visibility" })] })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-6", children: [_jsx("h3", { className: "mb-3 font-semibold text-lg text-white", children: "Usage Example" }), _jsx("pre", { className: "overflow-x-auto text-gray-300 text-sm", children: _jsx("code", { children: `// Default horizontal orientation
-<VolumeControl
-  volume={volume}
-  isMuted={isMuted}
-  showVolumeSlider={showSlider}
-  onToggleMute={handleMute}
-  onVolumeChange={handleVolumeChange}
-  onShowVolumeSlider={setShowSlider}
-/>
-
-// Vertical orientation
-<VolumeControl
-  volume={volume}
-  isMuted={isMuted}
-  showVolumeSlider={showSlider}
-  onToggleMute={handleMute}
-  onVolumeChange={handleVolumeChange}
-  onShowVolumeSlider={setShowSlider}
-  orientation="vertical"
-/>` }) })] })] }) }));
-}

package/src/components/icon-demo.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { IconProvider, PlayIcon, PauseIcon, VolumeIcon, VolumeOffIcon, SettingsIcon, FullscreenIcon, LoadingIcon, PlayPauseIcon } from '../icons';
-export function IconSystemDemo() {
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [volume, setVolume] = useState(0.8);
-    const [theme, setTheme] = useState({
-        size: 24,
-        strokeWidth: 2,
-        color: 'currentColor'
-    });
-    const customPlayIcon = ({ className, ...props }) => (_jsxs("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#ff6b6b" }), _jsx("polygon", { points: "10 8 16 12 10 16 10 8", fill: "white" })] }));
-    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-4xl", children: [_jsx("h1", { className: "mb-8 text-center font-bold text-3xl text-white", children: "Icon System Demo" }), _jsxs("div", { className: "mb-8 rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Theme Configuration" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [_jsxs("div", { children: [_jsxs("label", { className: "mb-2 block font-medium text-sm text-white", children: ["Size: ", theme.size] }), _jsx("input", { type: "range", min: "16", max: "48", value: theme.size, onChange: (e) => setTheme(prev => ({ ...prev, size: Number(e.target.value) })), className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { children: [_jsxs("label", { className: "mb-2 block font-medium text-sm text-white", children: ["Stroke Width: ", theme.strokeWidth] }), _jsx("input", { type: "range", min: "1", max: "4", step: "0.5", value: theme.strokeWidth, onChange: (e) => setTheme(prev => ({ ...prev, strokeWidth: Number(e.target.value) })), className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block font-medium text-sm text-white", children: "Color" }), _jsxs("select", { value: theme.color, onChange: (e) => setTheme(prev => ({ ...prev, color: e.target.value })), className: "w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white", children: [_jsx("option", { value: "currentColor", children: "Current Color" }), _jsx("option", { value: "#ffffff", children: "White" }), _jsx("option", { value: "#06b6d4", children: "Cyan" }), _jsx("option", { value: "#f59e0b", children: "Amber" }), _jsx("option", { value: "#ef4444", children: "Red" })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Default Icons" }), _jsx(IconProvider, { theme: theme, children: _jsxs("div", { className: "grid grid-cols-4 gap-4 text-white", children: [_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PlayIcon, {}), _jsx("span", { className: "text-xs", children: "Play" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PauseIcon, {}), _jsx("span", { className: "text-xs", children: "Pause" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(VolumeIcon, {}), _jsx("span", { className: "text-xs", children: "Volume" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(VolumeOffIcon, {}), _jsx("span", { className: "text-xs", children: "Mute" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-xs", children: "Settings" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(FullscreenIcon, {}), _jsx("span", { className: "text-xs", children: "Fullscreen" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(LoadingIcon, {}), _jsx("span", { className: "text-xs", children: "Loading" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PlayPauseIcon, { isPlaying: isPlaying }), _jsx("span", { className: "text-xs", children: "Play/Pause" })] })] }) })] }), _jsxs("div", { className: "rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Custom Icons" }), _jsx(IconProvider, { theme: theme, icons: {
-                                        play: customPlayIcon
-                                    }, children: _jsxs("div", { className: "grid grid-cols-4 gap-4 text-white", children: [_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PlayIcon, {}), _jsx("span", { className: "text-xs", children: "Custom Play" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(PauseIcon, {}), _jsx("span", { className: "text-xs", children: "Default Pause" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(VolumeIcon, {}), _jsx("span", { className: "text-xs", children: "Default Volume" })] }), _jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(SettingsIcon, {}), _jsx("span", { className: "text-xs", children: "Default Settings" })] })] }) })] })] }), _jsxs("div", { className: "mt-8 rounded-lg bg-gray-800 p-6", children: [_jsx("h2", { className: "mb-4 font-semibold text-white text-xl", children: "Interactive Media Player Demo" }), _jsx(IconProvider, { theme: { ...theme, size: 32 }, children: _jsxs("div", { className: "flex items-center justify-center space-x-6 text-white", children: [_jsx("button", { onClick: () => setIsPlaying(!isPlaying), className: "rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700", "aria-label": isPlaying ? 'Pause' : 'Play', children: _jsx(PlayPauseIcon, { isPlaying: isPlaying }) }), _jsx("button", { onClick: () => setVolume(volume > 0 ? 0 : 0.8), className: "rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700", "aria-label": volume > 0 ? 'Mute' : 'Unmute', children: volume > 0 ? _jsx(VolumeIcon, {}) : _jsx(VolumeOffIcon, {}) }), _jsx("button", { className: "rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700", "aria-label": "Settings", children: _jsx(SettingsIcon, {}) }), _jsx("button", { className: "rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700", "aria-label": "Fullscreen", children: _jsx(FullscreenIcon, {}) })] }) }), _jsxs("div", { className: "mt-4 text-center text-gray-400 text-sm", children: ["Status: ", isPlaying ? 'Playing' : 'Paused', " | Volume: ", volume > 0 ? 'On' : 'Muted'] })] })] }) }));
-}