@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/src/components/examples/custom-controls-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-controls-example.d.ts","sourceRoot":"","sources":["custom-controls-example.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,0BAA0B;IAC1C,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CA6C3F;yBA7Ce,qBAAqB"}

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

@@ -0,0 +1,12 @@
+"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/dist/src/components/examples/custom-controls-example.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+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 interface CustomControlsExampleProps {
+	src: string
+	poster?: string
+	className?: string
+}
+
+export function CustomControlsExample({ src, poster, className }: CustomControlsExampleProps) {
+	return (
+		<MediaPlayer src={src} customControls={true} showControls={false} className={className}>
+			{({ state, controls }) => (
+				<div className="absolute inset-0 flex flex-col justify-end">
+					{/* Background gradient */}
+					<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+
+					{/* Controls container */}
+					<div className="relative z-10 space-y-3 p-4">
+						{/* Seek bar */}
+						<div className="w-full">
+							<SeekBar
+								currentTime={state.currentTime}
+								duration={state.duration}
+								onSeek={controls.seek}
+								className="w-full"
+							/>
+						</div>
+
+						{/* Bottom controls */}
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-3">
+								<PlayButton isPlaying={state.isPlaying} onToggle={controls.toggle} size="lg" />
+								<VolumeControl
+									volume={state.volume}
+									isMuted={state.isMuted}
+									onVolumeChange={controls.setVolume}
+									onToggleMute={controls.toggleMute}
+								/>
+								<TimeDisplay currentTime={state.currentTime} duration={state.duration} />
+							</div>
+
+							<div className="flex items-center gap-2">
+								<FullscreenButton
+									isFullscreen={state.isFullscreen}
+									onToggle={controls.toggleFullscreen}
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</MediaPlayer>
+	)
+}
+
+CustomControlsExample.displayName = "CustomControlsExample"

package/dist/src/components/examples/enhanced-controls-example.d.ts

@@ -0,0 +1,9 @@
+export interface EnhancedControlsExampleProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function EnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomEnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkipButtonsOnlyExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enhanced-controls-example.d.ts.map

package/dist/src/components/examples/enhanced-controls-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-controls-example.d.ts","sourceRoot":"","sources":["enhanced-controls-example.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,4BAA4B;IAC5C,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAGD,wBAAgB,uBAAuB,CAAC,EACvC,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CAmB9B;AAGD,wBAAgB,6BAA6B,CAAC,EAC7C,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CA+B9B;AAGD,wBAAgB,sBAAsB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CAsB9B"}

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

@@ -0,0 +1,18 @@
+"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/dist/src/components/examples/enhanced-controls-example.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import React from "react"
+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"
+
+export interface EnhancedControlsExampleProps {
+	src: string
+	poster?: string
+	className?: string
+}
+
+// Complete example with all enhanced controls
+export function EnhancedControlsExample({
+	src,
+	poster,
+	className
+}: EnhancedControlsExampleProps) {
+	return (
+		<MediaProvider>
+			<MediaPlayerRoot className={className}>
+				<MediaPlayerVideo src={src} poster={poster} />
+				
+				{/* Complete control bar with all features */}
+				<EnhancedControlBar 
+					className="absolute right-0 bottom-0 left-0"
+					showSkipButtons={true}
+					showVolumeControl={true}
+					showTimeDisplay={true}
+					playButtonSize="xl"
+					skipButtonSize="md"
+					skipTime={10}
+				/>
+			</MediaPlayerRoot>
+		</MediaProvider>
+	)
+}
+
+// Example with individual components for custom layouts
+export function CustomEnhancedControlsExample({
+	src,
+	poster,
+	className
+}: EnhancedControlsExampleProps) {
+	return (
+		<MediaProvider>
+			<MediaPlayerRoot className={className}>
+				<MediaPlayerVideo src={src} poster={poster} />
+				
+				<div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+					{/* Seek bar */}
+					<EnhancedSeekBar className="mb-4" />
+					
+					{/* Custom control layout */}
+					<div className="flex items-center justify-between">
+						{/* Left side controls */}
+						<div className="flex items-center gap-3">
+							<EnhancedBackwardButton skipTime={15} size="md" />
+							<EnhancedPlayButton size="xl" />
+							<EnhancedForwardButton skipTime={15} size="md" />
+							<EnhancedVolumeControl />
+						</div>
+						
+						{/* Right side info */}
+						<div className="flex items-center gap-2 font-mono text-sm text-white">
+							<EnhancedTimeDisplay variant="current" />
+							<span className="text-white/60">/</span>
+							<EnhancedTimeDisplay variant="duration" />
+						</div>
+					</div>
+				</div>
+			</MediaPlayerRoot>
+		</MediaProvider>
+	)
+}
+
+// Minimal example with just skip buttons
+export function SkipButtonsOnlyExample({
+	src,
+	poster,
+	className
+}: EnhancedControlsExampleProps) {
+	return (
+		<MediaProvider>
+			<MediaPlayerRoot className={className}>
+				<MediaPlayerVideo src={src} poster={poster} />
+				
+				<div className="-translate-x-1/2 absolute bottom-4 left-1/2 transform">
+					<div className="flex items-center gap-4">
+						<EnhancedBackwardButton 
+							skipTime={10} 
+							size="lg"
+						/>
+						<EnhancedPlayButton size="xl" />
+						<EnhancedForwardButton 
+							skipTime={10} 
+							size="lg"
+						/>
+					</div>
+				</div>
+			</MediaPlayerRoot>
+		</MediaProvider>
+	)
+}

package/dist/src/components/examples/enhanced-media-player-example.d.ts

@@ -0,0 +1,9 @@
+interface EnhancedMediaPlayerProps {
+    src: string | string[];
+    className?: string;
+    title?: string;
+    description?: string;
+}
+export declare function EnhancedMediaPlayerExample({ src, className, title, description }: EnhancedMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=enhanced-media-player-example.d.ts.map

package/dist/src/components/examples/enhanced-media-player-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-media-player-example.d.ts","sourceRoot":"","sources":["enhanced-media-player-example.tsx"],"names":[],"mappings":"AAUA,UAAU,wBAAwB;IACjC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAC1C,GAAG,EACH,SAAS,EACT,KAAsB,EACtB,WAA+D,EAC/D,EAAE,wBAAwB,2CA8Q1B"}

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

@@ -0,0 +1,13 @@
+"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/dist/src/components/examples/enhanced-media-player-example.tsx

@@ -0,0 +1,293 @@
+"use client"
+
+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"
+
+interface EnhancedMediaPlayerProps {
+	src: string | string[]
+	className?: string
+	title?: string
+	description?: string
+}
+
+export function EnhancedMediaPlayerExample({ 
+	src, 
+	className,
+	title = "Sample Media",
+	description = "Demonstrating the new BaroiPlayer design system"
+}: EnhancedMediaPlayerProps) {
+	const [isControlsVisible, setIsControlsVisible] = useState(true)
+	
+	return (
+		<div className={cn("mx-auto w-full max-w-4xl space-y-6", className)}>
+			{/* Media Player Title */}
+			<div className="space-y-2">
+				<h2 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-xl">
+					{title}
+				</h2>
+				<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
+					{description}
+				</p>
+			</div>
+
+			{/* Enhanced Media Player with Custom Controls */}
+			<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)}>
+				<MediaPlayer
+					src={src}
+					customControls={true}>
+				{({ state, controls }) => (
+					<>
+						{/* Main Control Overlay */}
+						<div 
+							className={cn(
+								"absolute inset-0 z-20 flex items-center justify-center",
+								"transition-all duration-300",
+								state.isLoading && "pointer-events-none"
+							)}>
+							<div className={cn(
+								"relative",
+								"transition-all duration-300 ease-out",
+								"hover:scale-105"
+							)}>
+								<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"
+									)}
+								/>
+							</div>
+						</div>
+
+						{/* Bottom Control Panel */}
+						<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"
+						)}>
+							{/* Seek Bar Container */}
+							<div className="-mt-2 px-4">
+								<SeekBar
+									currentTime={state.currentTime}
+									duration={state.duration}
+									buffered={state.buffered}
+									onSeek={controls.seek}
+									className="w-full"
+								/>
+							</div>
+
+							{/* Main Controls Row */}
+							<div className={cn(
+								"flex items-center justify-between gap-4 p-4",
+								"media-md:px-8 media-sm:px-6"
+							)}>
+								{/* Left Side - Playback Controls */}
+								<div className="flex items-center gap-3 media-sm:gap-4">
+									<PlayButton
+										isPlaying={state.isPlaying}
+										onToggle={controls.toggle}
+										disabled={state.isLoading}
+										size="md"
+									/>
+									
+									<div className="media-sm:block hidden">
+										<TimeDisplay
+											currentTime={state.currentTime}
+											duration={state.duration}
+											className="font-mono text-fluid-sm"
+										/>
+									</div>
+								</div>
+
+								{/* Center - Media Information */}
+								<div className={cn(
+									"media-md:block hidden flex-1 text-center",
+									"space-y-1"
+								)}>
+									<p className="truncate font-medium text-[color:var(--media-text)] text-fluid-sm">
+										{title}
+									</p>
+									{state.duration > 0 && (
+										<div className="text-[color:var(--media-text-secondary)] text-xs">
+											{Math.round((state.currentTime / state.duration) * 100)}% complete
+										</div>
+									)}
+								</div>
+
+								{/* Right Side - Volume & Settings */}
+								<div className="flex items-center gap-3 media-sm:gap-4">
+									<div className="media-sm:block hidden">
+										<VolumeControl
+											volume={state.volume}
+											isMuted={state.isMuted}
+											onVolumeChange={controls.setVolume}
+											onToggleMute={controls.toggleMute}
+											size="md"
+										/>
+									</div>
+									
+									{/* Fullscreen Button */}
+									<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">
+										<svg 
+											className="m-auto size-5 transition-transform duration-200 group-hover:scale-110"
+											fill="none" 
+											stroke="currentColor" 
+											viewBox="0 0 24 24">
+											<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" 
+											/>
+										</svg>
+									</button>
+								</div>
+							</div>
+
+							{/* Mobile Time Display */}
+							<div className="media-sm:hidden px-4 pb-3">
+								<TimeDisplay
+									currentTime={state.currentTime}
+									duration={state.duration}
+									className="text-center font-mono text-sm"
+								/>
+							</div>
+						</div>
+
+						{/* Loading State Overlay */}
+						{state.isLoading && (
+							<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"
+							)}>
+								<div className="space-y-4 text-center text-[color:var(--media-text)]">
+									<div className="relative">
+										<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)]"
+										)}></div>
+										<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"
+										)}></div>
+									</div>
+									<p className="font-medium text-[color:var(--media-text-secondary)] text-fluid-base">
+										Loading {title}...
+									</p>
+								</div>
+							</div>
+						)}
+
+						{/* Error State */}
+						{state.error && (
+							<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"
+							)}>
+								<div className="mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]">
+									<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4">
+										<svg className="size-8 text-[color:var(--color-error)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<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" />
+										</svg>
+									</div>
+									<div>
+										<h3 className="mb-2 font-semibold text-fluid-lg">Playback Error</h3>
+										<p className="text-[color:var(--media-text-secondary)] text-fluid-sm">
+											{state.error}
+										</p>
+									</div>
+									<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"
+										)}>
+										Try Again
+									</button>
+								</div>
+							</div>
+						)}
+					</>
+				)}
+				</MediaPlayer>
+			</div>
+
+			{/* Design System Showcase */}
+			<div className="grid grid-cols-1 media-lg:grid-cols-3 media-sm:grid-cols-2 gap-4">
+				<div className="glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6">
+					<h3 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-base">
+						Modern Colors
+					</h3>
+					<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
+						OKLCH color space for vivid, accessible colors across all displays.
+					</p>
+					<div className="flex gap-2">
+						<div className="h-4 w-4 rounded-full bg-[color:var(--color-brand-primary)] shadow-sm"></div>
+						<div className="h-4 w-4 rounded-full bg-[color:var(--color-brand-accent)] shadow-sm"></div>
+						<div className="h-4 w-4 rounded-full bg-[color:var(--color-brand-highlight)] shadow-sm"></div>
+					</div>
+				</div>
+
+				<div className="glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6">
+					<h3 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-base">
+						Container Queries
+					</h3>
+					<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
+						Responsive design based on container size, not just viewport.
+					</p>
+					<div className="font-mono text-[color:var(--color-text-tertiary)] text-xs">
+						@container (min-width: 480px)
+					</div>
+				</div>
+
+				<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">
+					<h3 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-base">
+						Smooth Animations
+					</h3>
+					<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
+						Performance-optimized with CSS containment and modern easing.
+					</p>
+					<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)]"></div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/dist/src/components/examples/loading-states-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function LoadingStatesDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loading-states-demo.d.ts.map

package/dist/src/components/examples/loading-states-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-states-demo.d.ts","sourceRoot":"","sources":["loading-states-demo.tsx"],"names":[],"mappings":"AAOA,wBAAgB,iBAAiB,4CAsIhC"}

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

@@ -0,0 +1,41 @@
+"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"
+  }}
+/>` }) })] })] })] }) }));
+}