@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/ui/play-button.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const sizeVariants = {
+    sm: { button: "size-8", icon: 16 },
+    md: { button: "size-10", icon: 20 },
+    lg: { button: "size-12", icon: 24 },
+    xl: { button: "size-16", icon: 32 }
+};
+export const PlayButton = forwardRef(({ isPlaying, onToggle, disabled = false, size = "lg", className }, ref) => {
+    const sizeConfig = sizeVariants[size] || sizeVariants.lg;
+    return (_jsxs("button", { ref: ref, type: "button", onClick: onToggle, disabled: disabled, "data-state": isPlaying ? "playing" : "paused", className: cn(
+        // Base styles with new design system
+        "group relative inline-flex items-center justify-center", "glass-strong media-control rounded-full contain-layout", "focus-ring touch-manipulation", sizeConfig.button, 
+        // Color transitions with OKLCH
+        "text-[color:var(--media-text)] transition-all duration-300", "bg-[color:var(--media-control-bg)] backdrop-blur-sm", "border border-[color:var(--media-border)]/30", 
+        // Interactive states
+        "hover:bg-[color:var(--media-control-hover)]", "hover:border-[color:var(--media-border)]/50", "hover:shadow-[color:var(--media-bg)]/20 hover:shadow-lg", "hover:-translate-y-0.5 hover:scale-105", "active:bg-[color:var(--media-control-active)]", "active:translate-y-0 active:scale-100", 
+        // Focus state
+        "focus-visible:ring-2 focus-visible:ring-[color:var(--media-focus)]", "focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--media-bg)]", 
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50", "disabled:hover:translate-y-0 disabled:hover:scale-100", "disabled:hover:bg-[color:var(--media-control-bg)]", className), "aria-label": isPlaying ? "Pause media" : "Play media", "aria-pressed": isPlaying, children: [_jsx("div", { className: cn("absolute inset-0 rounded-full opacity-0 transition-opacity duration-300", "bg-gradient-to-br from-[color:var(--color-media-play)] to-[color:var(--color-media-pause)]", "blur-sm group-hover:opacity-20", isPlaying && "opacity-10") }), isPlaying ? (_jsx(Pause, { size: sizeConfig.icon, className: cn("relative z-10 fill-current transition-all duration-200", "text-[color:var(--color-media-pause)]", "group-hover:scale-110 group-active:scale-95", "drop-shadow-sm") })) : (_jsx(Play, { size: sizeConfig.icon, className: cn("relative z-10 fill-current transition-all duration-200", "ml-0.5 text-[color:var(--color-media-play)]", "group-hover:scale-110 group-active:scale-95", "drop-shadow-sm") })), _jsx("div", { className: cn("absolute inset-0 rounded-full opacity-0", "scale-75 bg-[color:var(--media-text)]/10", "group-active:scale-100 group-active:opacity-100", "transition-all duration-150 ease-out") })] }));
+});
+PlayButton.displayName = "PlayButton";

package/dist/src/components/ui/play-button.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { Pause, Play } from "lucide-react"
+import { forwardRef } from "react"
+import { cn } from "../../lib/utils"
+import type { PlayButtonProps } from "../../types/index"
+
+const sizeVariants = {
+	sm: { button: "size-8", icon: 16 },
+	md: { button: "size-10", icon: 20 },
+	lg: { button: "size-12", icon: 24 },
+	xl: { button: "size-16", icon: 32 }
+} as const
+
+export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
+	({ isPlaying, onToggle, disabled = false, size = "lg", className }, ref) => {
+		const sizeConfig = sizeVariants[size] || sizeVariants.lg
+		
+		return (
+			<button
+				ref={ref}
+				type="button"
+				onClick={onToggle}
+				disabled={disabled}
+				data-state={isPlaying ? "playing" : "paused"}
+				className={cn(
+					// Base styles with new design system
+					"group relative inline-flex items-center justify-center",
+					"glass-strong media-control rounded-full contain-layout",
+					"focus-ring touch-manipulation",
+					sizeConfig.button,
+					
+					// Color transitions with OKLCH
+					"text-[color:var(--media-text)] transition-all duration-300",
+					"bg-[color:var(--media-control-bg)] backdrop-blur-sm",
+					"border border-[color:var(--media-border)]/30",
+					
+					// Interactive states
+					"hover:bg-[color:var(--media-control-hover)]",
+					"hover:border-[color:var(--media-border)]/50",
+					"hover:shadow-[color:var(--media-bg)]/20 hover:shadow-lg",
+					"hover:-translate-y-0.5 hover:scale-105",
+					
+					"active:bg-[color:var(--media-control-active)]",
+					"active:translate-y-0 active:scale-100",
+					
+					// Focus state
+					"focus-visible:ring-2 focus-visible:ring-[color:var(--media-focus)]",
+					"focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--media-bg)]",
+					
+					// Disabled state
+					"disabled:cursor-not-allowed disabled:opacity-50",
+					"disabled:hover:translate-y-0 disabled:hover:scale-100",
+					"disabled:hover:bg-[color:var(--media-control-bg)]",
+					
+					className
+				)}
+				aria-label={isPlaying ? "Pause media" : "Play media"}
+				aria-pressed={isPlaying}>
+				{/* Background glow effect */}
+				<div 
+					className={cn(
+						"absolute inset-0 rounded-full opacity-0 transition-opacity duration-300",
+						"bg-gradient-to-br from-[color:var(--color-media-play)] to-[color:var(--color-media-pause)]",
+						"blur-sm group-hover:opacity-20",
+						isPlaying && "opacity-10"
+					)} 
+				/>
+				
+				{/* Icon with enhanced styling */}
+				{isPlaying ? (
+					<Pause 
+						size={sizeConfig.icon} 
+						className={cn(
+							"relative z-10 fill-current transition-all duration-200",
+							"text-[color:var(--color-media-pause)]",
+							"group-hover:scale-110 group-active:scale-95",
+							"drop-shadow-sm"
+						)} 
+					/>
+				) : (
+					<Play 
+						size={sizeConfig.icon} 
+						className={cn(
+							"relative z-10 fill-current transition-all duration-200",
+							"ml-0.5 text-[color:var(--color-media-play)]",
+							"group-hover:scale-110 group-active:scale-95",
+							"drop-shadow-sm"
+						)} 
+					/>
+				)}
+				
+				{/* Ripple effect */}
+				<div 
+					className={cn(
+						"absolute inset-0 rounded-full opacity-0",
+						"scale-75 bg-[color:var(--media-text)]/10",
+						"group-active:scale-100 group-active:opacity-100",
+						"transition-all duration-150 ease-out"
+					)}
+				/>
+			</button>
+		)
+	}
+)
+
+PlayButton.displayName = "PlayButton"

package/dist/src/components/ui/seek-bar.d.ts

@@ -0,0 +1,3 @@
+import type { SeekBarProps } from "../../types/index";
+export declare const SeekBar: import("react").ForwardRefExoticComponent<SeekBarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=seek-bar.d.ts.map

package/dist/src/components/ui/seek-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-bar.d.ts","sourceRoot":"","sources":["seek-bar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,eAAO,MAAM,OAAO,yGAqJnB,CAAA"}

package/dist/src/components/ui/seek-bar.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Slider from "@radix-ui/react-slider";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { forwardRef, useState, useMemo, useTransition, useDeferredValue, useRef } from "react";
+import { formatTime } from "../../lib/format-time";
+import { cn } from "../../lib/utils";
+export const SeekBar = forwardRef(({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    const [isDragging, setIsDragging] = useState(false);
+    const [previewTime, setPreviewTime] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    // Defer non-critical updates for better performance
+    const deferredHovering = useDeferredValue(isHovering);
+    const deferredPreviewTime = useDeferredValue(previewTime);
+    // Memoize expensive calculations
+    const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration]);
+    // Calculate buffered ranges with memoization
+    const bufferedRanges = useMemo(() => {
+        const ranges = [];
+        if (buffered && duration > 0) {
+            for (let i = 0; i < buffered.length; i++) {
+                const start = (buffered.start(i) / duration) * 100;
+                const end = (buffered.end(i) / duration) * 100;
+                ranges.push({ start, end });
+            }
+        }
+        return ranges;
+    }, [buffered, duration]);
+    // Throttled seek handler with React 19 transitions
+    const seekTimeoutRef = useRef();
+    const lastSeekTime = useRef(0);
+    const handleValueChange = ([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        setPreviewTime(time);
+        if (isDragging) {
+            onSeek(time);
+        }
+    };
+    const handleValueCommit = ([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        onSeek(time);
+        setIsDragging(false);
+    };
+    const handlePointerDown = () => {
+        setIsDragging(true);
+    };
+    return (_jsx("div", { ref: ref, className: cn("media-container relative w-full text-[color:var(--media-text)]", "touch-manipulation contain-layout", className), onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { className: "relative animate-enter", children: _jsxs(Slider.Root, { className: cn("group relative flex w-full touch-none select-none items-center", "media-md:h-4 media-sm:h-3 media-xs:h-2", "focus-ring cursor-pointer"), value: [progress], max: 100, step: 0.1, onValueChange: handleValueChange, onValueCommit: handleValueCommit, onPointerDown: handlePointerDown, "aria-label": "Seek to position", children: [_jsxs(Slider.Track, { className: cn("relative grow overflow-hidden rounded-full", "bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm", "border border-[color:var(--media-border)]/20", "shadow-inner transition-all duration-300 ease-out", "h-1 group-focus-within:h-1.5 group-hover:h-1.5", "group-hover:bg-[color:var(--media-control-bg)]/60", "group-hover:border-[color:var(--media-border)]/40"), children: [bufferedRanges.map((range, index) => (_jsx("div", { className: cn("absolute h-full rounded-full transition-all duration-500", "bg-[color:var(--color-media-buffered)] shadow-inner", "opacity-60 group-hover:opacity-80"), style: {
+                                                    left: `${range.start}%`,
+                                                    width: `${range.end - range.start}%`
+                                                } }, index))), _jsx(Slider.Range, { className: cn("absolute h-full rounded-full transition-all duration-300", "bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]", "shadow-[color:var(--color-brand-primary)]/20 shadow-lg", "group-hover:shadow-xl") })] }), _jsx(Slider.Thumb, { className: cn("block size-4 rounded-full border-white/20 bg-white", "shadow-lg hover:shadow-xl", "opacity-0 group-hover:opacity-100", "hover:scale-110 hover:bg-white/95 active:scale-95", "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50", "focus:ring-offset-2 focus:ring-offset-black/20", "transition-all duration-300 ease-out", isDragging && "opacity-100"), "aria-label": "Seek" })] }) }) }), isDragging && (_jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), sideOffset: 10, children: [formatTime(previewTime), _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) }))] }) }) }));
+});
+SeekBar.displayName = "SeekBar";

package/dist/src/components/ui/seek-bar.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import * as Slider from "@radix-ui/react-slider"
+import * as Tooltip from "@radix-ui/react-tooltip"
+import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react"
+import { formatTime } from "../../lib/format-time"
+import { cn } from "../../lib/utils"
+import type { SeekBarProps } from "../../types/index"
+
+export const SeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
+	({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+		// React 19 concurrent features
+		const [isPending, startTransition] = useTransition()
+		const [isDragging, setIsDragging] = useState(false)
+		const [previewTime, setPreviewTime] = useState(0)
+		const [isHovering, setIsHovering] = useState(false)
+
+		// Defer non-critical updates for better performance
+		const deferredHovering = useDeferredValue(isHovering)
+		const deferredPreviewTime = useDeferredValue(previewTime)
+
+		// Memoize expensive calculations
+		const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration])
+
+		// Calculate buffered ranges with memoization
+		const bufferedRanges = useMemo(() => {
+			const ranges = []
+			if (buffered && duration > 0) {
+				for (let i = 0; i < buffered.length; i++) {
+					const start = (buffered.start(i) / duration) * 100
+					const end = (buffered.end(i) / duration) * 100
+					ranges.push({ start, end })
+				}
+			}
+			return ranges
+		}, [buffered, duration])
+
+		// Throttled seek handler with React 19 transitions
+		const seekTimeoutRef = useRef<NodeJS.Timeout>()
+		const lastSeekTime = useRef<number>(0)
+
+		const handleValueChange = ([value]: number[]) => {
+        				const time = ((value ?? 0) / 100) * duration
+        				setPreviewTime(time)
+        				if (isDragging) {
+        					onSeek(time)
+        				}
+        			}
+
+		const handleValueCommit = ([value]: number[]) => {
+        				const time = ((value ?? 0) / 100) * duration
+        				onSeek(time)
+        				setIsDragging(false)
+        			}
+
+		const handlePointerDown = () => {
+        			setIsDragging(true)
+        		}
+
+		return (
+			<div 
+				ref={ref} 
+				className={cn(
+					"media-container relative w-full text-[color:var(--media-text)]",
+					"touch-manipulation contain-layout",
+					className
+				)}
+				onMouseEnter={() => setIsHovering(true)}
+				onMouseLeave={() => setIsHovering(false)}>
+				<Tooltip.Provider>
+					<Tooltip.Root>
+						<Tooltip.Trigger asChild>
+							<div className="relative animate-enter">
+								<Slider.Root
+									className={cn(
+										"group relative flex w-full touch-none select-none items-center",
+										"media-md:h-4 media-sm:h-3 media-xs:h-2",
+										"focus-ring cursor-pointer"
+									)}
+									value={[progress]}
+									max={100}
+									step={0.1}
+									onValueChange={handleValueChange}
+									onValueCommit={handleValueCommit}
+									onPointerDown={handlePointerDown}
+									aria-label="Seek to position">
+									<Slider.Track
+										className={cn(
+											"relative grow overflow-hidden rounded-full",
+											"bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm",
+											"border border-[color:var(--media-border)]/20",
+											"shadow-inner transition-all duration-300 ease-out",
+											"h-1 group-focus-within:h-1.5 group-hover:h-1.5",
+											"group-hover:bg-[color:var(--media-control-bg)]/60",
+											"group-hover:border-[color:var(--media-border)]/40"
+										)}>
+										{/* Buffered ranges */}
+										{bufferedRanges.map((range, index) => (
+											<div
+												key={index}
+												className={cn(
+													"absolute h-full rounded-full transition-all duration-500",
+													"bg-[color:var(--color-media-buffered)] shadow-inner",
+													"opacity-60 group-hover:opacity-80"
+												)}
+												style={{
+													left: `${range.start}%`,
+													width: `${range.end - range.start}%`
+												}}
+											/>
+										))}
+
+										{/* Progress range with gradient */}
+										<Slider.Range 
+											className={cn(
+												"absolute h-full rounded-full transition-all duration-300",
+												"bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]",
+												"shadow-[color:var(--color-brand-primary)]/20 shadow-lg",
+												"group-hover:shadow-xl"
+											)} 
+										/>
+									</Slider.Track>
+
+									<Slider.Thumb
+										className={cn(
+											"block size-4 rounded-full border-white/20 bg-white",
+											"shadow-lg hover:shadow-xl",
+											"opacity-0 group-hover:opacity-100",
+											"hover:scale-110 hover:bg-white/95 active:scale-95",
+											"focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50",
+											"focus:ring-offset-2 focus:ring-offset-black/20",
+											"transition-all duration-300 ease-out",
+											isDragging && "opacity-100"
+										)}
+										aria-label="Seek"
+									/>
+								</Slider.Root>
+							</div>
+						</Tooltip.Trigger>
+
+						{isDragging && (
+							<Tooltip.Portal>
+								<Tooltip.Content
+									className={cn(
+										"rounded bg-black/80 px-2 py-1 text-sm text-white",
+										"fade-in-0 zoom-in-95 animate-in"
+									)}
+									sideOffset={10}>
+									{formatTime(previewTime)}
+									<Tooltip.Arrow className="fill-black/80" />
+								</Tooltip.Content>
+							</Tooltip.Portal>
+						)}
+					</Tooltip.Root>
+				</Tooltip.Provider>
+			</div>
+		)
+	}
+)
+
+SeekBar.displayName = "SeekBar"

package/dist/src/components/ui/time-display.d.ts

@@ -0,0 +1,3 @@
+import type { TimeDisplayProps } from "../../types/index";
+export declare const TimeDisplay: import("react").ForwardRefExoticComponent<TimeDisplayProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=time-display.d.ts.map

package/dist/src/components/ui/time-display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-display.d.ts","sourceRoot":"","sources":["time-display.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,eAAO,MAAM,WAAW,6GA8BvB,CAAA"}

package/dist/src/components/ui/time-display.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { formatTime } from "../../lib/format-time";
+import { cn } from "../../lib/utils";
+export const TimeDisplay = forwardRef(({ currentTime, duration, showRemaining = false, size = "sm", className }, ref) => {
+    const current = formatTime(currentTime);
+    const total = formatTime(duration);
+    const remaining = formatTime(duration - currentTime);
+    const sizeClasses = {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-lg"
+    };
+    return (_jsxs("div", { ref: ref, className: cn("flex items-center font-mono text-white text-xs", "rounded-lg backdrop-blur-sm", "px-3 py-1.5", sizeClasses[size], "select-none", className), children: [_jsx("span", { className: "tabular-nums", children: current }), _jsx("span", { className: "mx-1 text-white", children: "/" }), _jsx("span", { className: "tabular-nums", children: showRemaining ? `-${remaining}` : total })] }));
+});
+TimeDisplay.displayName = "TimeDisplay";

package/dist/src/components/ui/time-display.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { forwardRef } from "react"
+import { formatTime } from "../../lib/format-time"
+import { cn } from "../../lib/utils"
+import type { TimeDisplayProps } from "../../types/index"
+
+export const TimeDisplay = forwardRef<HTMLDivElement, TimeDisplayProps>(
+	({ currentTime, duration, showRemaining = false, size = "sm", className }, ref) => {
+		const current = formatTime(currentTime)
+		const total = formatTime(duration)
+		const remaining = formatTime(duration - currentTime)
+
+		const sizeClasses: Record<"sm" | "md" | "lg" | "xl", string> = {
+			sm: "text-xs",
+			md: "text-sm",
+			lg: "text-base",
+			xl: "text-lg"
+		}
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex items-center font-mono text-white text-xs",
+					"rounded-lg backdrop-blur-sm",
+					"px-3 py-1.5",
+					sizeClasses[size],
+					"select-none",
+					className
+				)}>
+				<span className="tabular-nums">{current}</span>
+				<span className="mx-1 text-white">/</span>
+				<span className="tabular-nums">{showRemaining ? `-${remaining}` : total}</span>
+			</div>
+		)
+	}
+)
+
+TimeDisplay.displayName = "TimeDisplay"

package/dist/src/components/ui/volume-control.d.ts

@@ -0,0 +1,3 @@
+import type { VolumeControlProps } from "../../types/index";
+export declare const VolumeControl: import("react").ForwardRefExoticComponent<VolumeControlProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=volume-control.d.ts.map

package/dist/src/components/ui/volume-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-control.d.ts","sourceRoot":"","sources":["volume-control.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AA0B3D,eAAO,MAAM,aAAa,+GA2GzB,CAAA"}

package/dist/src/components/ui/volume-control.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Slider from "@radix-ui/react-slider";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Volume1, Volume2, VolumeX } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const sizeConfig = {
+    md: {
+        button: "size-10",
+        icon: 18,
+        slider: "h-6",
+        thumb: "size-3",
+        track: "h-1"
+    },
+    lg: {
+        button: "size-12",
+        icon: 22,
+        slider: "h-7",
+        thumb: "size-4",
+        track: "h-1.5"
+    },
+    xl: {
+        button: "size-14",
+        icon: 26,
+        slider: "h-8",
+        thumb: "size-5",
+        track: "h-2"
+    }
+};
+export const VolumeControl = forwardRef(({ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className }, ref) => {
+    const getVolumeIcon = () => {
+        if (isMuted || volume === 0) {
+            return VolumeX;
+        }
+        else if (volume < 0.5) {
+            return Volume1;
+        }
+        else {
+            return Volume2;
+        }
+    };
+    const VolumeIcon = getVolumeIcon();
+    const buttonSizes = {
+        md: "h-11 w-11",
+        lg: "h-12 w-12",
+        xl: "h-14 w-14"
+    };
+    const iconSizes = {
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-7 w-7"
+    };
+    const sliderHeight = {
+        md: "h-6",
+        lg: "h-7",
+        xl: "h-8"
+    };
+    const thumbSize = {
+        md: "h-4 w-4",
+        lg: "h-4 w-4",
+        xl: "h-5 w-5"
+    };
+    const trackHeight = {
+        md: "h-1.5",
+        lg: "h-2",
+        xl: "h-2.5"
+    };
+    return (_jsxs("div", { ref: ref, className: cn("flex items-center space-x-3 text-white", className), children: [_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onToggleMute, className: cn("inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20", buttonSizes[size]), "aria-label": isMuted ? "Unmute" : "Mute", children: _jsx(VolumeIcon, { className: cn(iconSizes[size]) }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), sideOffset: 5, children: [isMuted ? "Unmute" : "Mute", _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) })] }) }), _jsx("div", { className: "w-32", children: _jsxs(Slider.Root, { className: cn("group relative flex w-full touch-none select-none items-center", sliderHeight[size]), value: [isMuted ? 0 : volume], max: 1, step: 0.01, onValueChange: ([value]) => onVolumeChange(value ?? 0), "aria-label": "Volume", children: [_jsx(Slider.Track, { className: cn("relative grow rounded-full bg-white/20 shadow-inner transition-all duration-300 group-hover:bg-white/30", "border border-white/10", trackHeight[size]), children: _jsx(Slider.Range, { className: "absolute h-full rounded-full bg-white shadow-sm" }) }), _jsx(Slider.Thumb, { className: cn("block rounded-full border-2 border-white/20 bg-white shadow-lg", "transition-all duration-300 ease-out hover:scale-110 hover:bg-white/95 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20", thumbSize[size]), "aria-label": "Volume" })] }) }), _jsx("span", { className: "w-10 text-right text-sm text-white", children: Math.round((isMuted ? 0 : volume) * 100) })] }));
+});
+VolumeControl.displayName = "VolumeControl";

package/dist/src/components/ui/volume-control.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as Slider from "@radix-ui/react-slider"
+import * as Tooltip from "@radix-ui/react-tooltip"
+import { Volume1, Volume2, VolumeX } from "lucide-react"
+import { forwardRef } from "react"
+import { cn } from "../../lib/utils"
+import type { VolumeControlProps } from "../../types/index"
+
+const sizeConfig = {
+	md: {
+		button: "size-10",
+		icon: 18,
+		slider: "h-6",
+		thumb: "size-3",
+		track: "h-1"
+	},
+	lg: {
+		button: "size-12",
+		icon: 22,
+		slider: "h-7",
+		thumb: "size-4",
+		track: "h-1.5"
+	},
+	xl: {
+		button: "size-14",
+		icon: 26,
+		slider: "h-8",
+		thumb: "size-5",
+		track: "h-2"
+	}
+} as const
+
+export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
+	({ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className }, ref) => {
+		const getVolumeIcon = () => {
+			if (isMuted || volume === 0) {
+				return VolumeX
+			} else if (volume < 0.5) {
+				return Volume1
+			} else {
+				return Volume2
+			}
+		}
+
+		const VolumeIcon = getVolumeIcon()
+		const buttonSizes: Record<"md" | "lg" | "xl", string> = {
+			md: "h-11 w-11",
+			lg: "h-12 w-12",
+			xl: "h-14 w-14"
+		}
+		const iconSizes: Record<"md" | "lg" | "xl", string> = {
+			md: "h-5 w-5",
+			lg: "h-6 w-6",
+			xl: "h-7 w-7"
+		}
+		const sliderHeight: Record<"md" | "lg" | "xl", string> = {
+			md: "h-6",
+			lg: "h-7",
+			xl: "h-8"
+		}
+		const thumbSize: Record<"md" | "lg" | "xl", string> = {
+			md: "h-4 w-4",
+			lg: "h-4 w-4",
+			xl: "h-5 w-5"
+		}
+		const trackHeight: Record<"md" | "lg" | "xl", string> = {
+			md: "h-1.5",
+			lg: "h-2",
+			xl: "h-2.5"
+		}
+
+		return (
+			<div ref={ref} className={cn("flex items-center space-x-3 text-white", className)}>
+				<Tooltip.Provider>
+					<Tooltip.Root>
+						<Tooltip.Trigger asChild>
+							<button
+								type="button"
+								onClick={onToggleMute}
+								className={cn(
+									"inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95",
+									"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
+									buttonSizes[size]
+								)}
+								aria-label={isMuted ? "Unmute" : "Mute"}>
+								<VolumeIcon className={cn(iconSizes[size])} />
+							</button>
+						</Tooltip.Trigger>
+						<Tooltip.Portal>
+							<Tooltip.Content
+								className={cn(
+									"rounded bg-black/80 px-2 py-1 text-sm text-white",
+									"fade-in-0 zoom-in-95 animate-in"
+								)}
+								sideOffset={5}>
+								{isMuted ? "Unmute" : "Mute"}
+								<Tooltip.Arrow className="fill-black/80" />
+							</Tooltip.Content>
+						</Tooltip.Portal>
+					</Tooltip.Root>
+				</Tooltip.Provider>
+
+				<div className="w-32">
+					<Slider.Root
+						className={cn(
+							"group relative flex w-full touch-none select-none items-center",
+							sliderHeight[size]
+						)}
+						value={[isMuted ? 0 : volume]}
+						max={1}
+						step={0.01}
+						onValueChange={([value]) => onVolumeChange(value ?? 0)}
+						aria-label="Volume">
+						<Slider.Track
+							className={cn(
+								"relative grow rounded-full bg-white/20 shadow-inner transition-all duration-300 group-hover:bg-white/30",
+								"border border-white/10",
+								trackHeight[size]
+							)}>
+							<Slider.Range className="absolute h-full rounded-full bg-white shadow-sm" />
+						</Slider.Track>
+						<Slider.Thumb
+							className={cn(
+								"block rounded-full border-2 border-white/20 bg-white shadow-lg",
+								"transition-all duration-300 ease-out hover:scale-110 hover:bg-white/95 active:scale-95",
+								"focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20",
+								thumbSize[size]
+							)}
+							aria-label="Volume"
+						/>
+					</Slider.Root>
+				</div>
+
+				<span className="w-10 text-right text-sm text-white">
+					{Math.round((isMuted ? 0 : volume) * 100)}
+				</span>
+			</div>
+		)
+	}
+)
+
+VolumeControl.displayName = "VolumeControl"