@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,31 @@
+"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/dist/src/components/examples/volume-orientation-demo.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { useState } from "react"
+import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer"
+
+export function VolumeOrientationDemo() {
+  const [orientation, setOrientation] = useState<"horizontal" | "vertical">("horizontal")
+  
+  return (
+    <div className="min-h-screen bg-gray-950 p-8">
+      <div className="mx-auto max-w-5xl space-y-8">
+        <div className="text-center">
+          <h1 className="mb-4 font-bold text-3xl text-white">
+            Enhanced Volume Control Demo
+          </h1>
+          <p className="mb-6 text-gray-400">
+            Small gradient volume slider with horizontal/vertical orientation
+          </p>
+          
+          {/* Orientation toggle */}
+          <div className="mb-8 flex justify-center gap-4">
+            <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"
+              }`}
+            >
+              Horizontal (Default)
+            </button>
+            <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"
+              }`}
+            >
+              Vertical
+            </button>
+          </div>
+        </div>
+
+        {/* Demo Player */}
+        <div className="aspect-video overflow-hidden rounded-lg bg-black">
+          <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}
+          />
+        </div>
+
+        {/* Features list */}
+        <div className="mt-8 grid gap-6 md:grid-cols-2">
+          <div className="rounded-lg bg-gray-900 p-6">
+            <h3 className="mb-3 font-semibold text-lg text-white">
+              Horizontal Mode (Default)
+            </h3>
+            <ul className="space-y-2 text-gray-400 text-sm">
+              <li>• Slider appears beside the volume button</li>
+              <li>• Expands horizontally on hover</li>
+              <li>• Cyan to blue gradient (4px height)</li>
+              <li>• Smooth 300ms transition</li>
+              <li>• White thumb appears on hover</li>
+            </ul>
+          </div>
+          
+          <div className="rounded-lg bg-gray-900 p-6">
+            <h3 className="mb-3 font-semibold text-lg text-white">
+              Vertical Mode
+            </h3>
+            <ul className="space-y-2 text-gray-400 text-sm">
+              <li>• Slider appears above the volume button</li>
+              <li>• Expands vertically on hover</li>
+              <li>• Same gradient rotated 90°</li>
+              <li>• Shows percentage value</li>
+              <li>• Dark backdrop for visibility</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Code example */}
+        <div className="rounded-lg bg-gray-900 p-6">
+          <h3 className="mb-3 font-semibold text-lg text-white">Usage Example</h3>
+          <pre className="overflow-x-auto text-gray-300 text-sm">
+            <code>{`// 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"
+/>`}</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/src/components/icon-demo.d.ts

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

package/dist/src/components/icon-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-demo.d.ts","sourceRoot":"","sources":["icon-demo.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,4CAmM7B"}

package/dist/src/components/icon-demo.js

@@ -0,0 +1,16 @@
+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'] })] })] }) }));
+}

package/dist/src/components/icon-demo.tsx

@@ -0,0 +1,209 @@
+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 }: any) => (
+    <svg 
+      className={className}
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24" 
+      fill="none"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" fill="#ff6b6b" />
+      <polygon points="10 8 16 12 10 16 10 8" fill="white" />
+    </svg>
+  )
+
+  return (
+    <div className="min-h-screen bg-gray-950 p-8">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="mb-8 text-center font-bold text-3xl text-white">
+          Icon System Demo
+        </h1>
+        
+        {/* Theme Controls */}
+        <div className="mb-8 rounded-lg bg-gray-800 p-6">
+          <h2 className="mb-4 font-semibold text-white text-xl">Theme Configuration</h2>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div>
+              <label className="mb-2 block font-medium text-sm text-white">
+                Size: {theme.size}
+              </label>
+              <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"
+              />
+            </div>
+            <div>
+              <label className="mb-2 block font-medium text-sm text-white">
+                Stroke Width: {theme.strokeWidth}
+              </label>
+              <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"
+              />
+            </div>
+            <div>
+              <label className="mb-2 block font-medium text-sm text-white">Color</label>
+              <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"
+              >
+                <option value="currentColor">Current Color</option>
+                <option value="#ffffff">White</option>
+                <option value="#06b6d4">Cyan</option>
+                <option value="#f59e0b">Amber</option>
+                <option value="#ef4444">Red</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+          {/* Default Icons */}
+          <div className="rounded-lg bg-gray-800 p-6">
+            <h2 className="mb-4 font-semibold text-white text-xl">Default Icons</h2>
+            <IconProvider theme={theme}>
+              <div className="grid grid-cols-4 gap-4 text-white">
+                <div className="flex flex-col items-center space-y-2">
+                  <PlayIcon />
+                  <span className="text-xs">Play</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <PauseIcon />
+                  <span className="text-xs">Pause</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <VolumeIcon />
+                  <span className="text-xs">Volume</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <VolumeOffIcon />
+                  <span className="text-xs">Mute</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <SettingsIcon />
+                  <span className="text-xs">Settings</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <FullscreenIcon />
+                  <span className="text-xs">Fullscreen</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <LoadingIcon />
+                  <span className="text-xs">Loading</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <PlayPauseIcon isPlaying={isPlaying} />
+                  <span className="text-xs">Play/Pause</span>
+                </div>
+              </div>
+            </IconProvider>
+          </div>
+
+          {/* Custom Icons */}
+          <div className="rounded-lg bg-gray-800 p-6">
+            <h2 className="mb-4 font-semibold text-white text-xl">Custom Icons</h2>
+            <IconProvider 
+              theme={theme}
+              icons={{
+                play: customPlayIcon
+              }}
+            >
+              <div className="grid grid-cols-4 gap-4 text-white">
+                <div className="flex flex-col items-center space-y-2">
+                  <PlayIcon />
+                  <span className="text-xs">Custom Play</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <PauseIcon />
+                  <span className="text-xs">Default Pause</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <VolumeIcon />
+                  <span className="text-xs">Default Volume</span>
+                </div>
+                <div className="flex flex-col items-center space-y-2">
+                  <SettingsIcon />
+                  <span className="text-xs">Default Settings</span>
+                </div>
+              </div>
+            </IconProvider>
+          </div>
+        </div>
+
+        {/* Interactive Demo */}
+        <div className="mt-8 rounded-lg bg-gray-800 p-6">
+          <h2 className="mb-4 font-semibold text-white text-xl">Interactive Media Player Demo</h2>
+          <IconProvider theme={{ ...theme, size: 32 }}>
+            <div className="flex items-center justify-center space-x-6 text-white">
+              <button
+                onClick={() => setIsPlaying(!isPlaying)}
+                className="rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700"
+                aria-label={isPlaying ? 'Pause' : 'Play'}
+              >
+                <PlayPauseIcon isPlaying={isPlaying} />
+              </button>
+              
+              <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'}
+              >
+                {volume > 0 ? <VolumeIcon /> : <VolumeOffIcon />}
+              </button>
+              
+              <button
+                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+                aria-label="Settings"
+              >
+                <SettingsIcon />
+              </button>
+              
+              <button
+                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+                aria-label="Fullscreen"
+              >
+                <FullscreenIcon />
+              </button>
+            </div>
+          </IconProvider>
+          
+          <div className="mt-4 text-center text-gray-400 text-sm">
+            Status: {isPlaying ? 'Playing' : 'Paused'} | Volume: {volume > 0 ? 'On' : 'Muted'}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/src/components/icons/index.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export interface IconProps {
+    size?: number;
+    className?: string;
+    color?: string;
+}
+export declare const MinimalPlayIcon: React.FC<IconProps>;
+export declare const MinimalPauseIcon: React.FC<IconProps>;
+export declare const MinimalVolumeIcon: React.FC<IconProps>;
+export declare const MinimalVolumeMutedIcon: React.FC<IconProps>;
+export declare const MinimalFullscreenIcon: React.FC<IconProps>;
+export declare const MinimalExitFullscreenIcon: React.FC<IconProps>;
+export declare const MinimalSettingsIcon: React.FC<IconProps>;
+export declare const MinimalSpinner: React.FC<IconProps>;
+export declare const MinimalForwardIcon: React.FC<IconProps>;
+export declare const MinimalBackwardIcon: React.FC<IconProps>;
+export declare const MinimalForward10Icon: React.FC<IconProps>;
+export declare const MinimalBackward10Icon: React.FC<IconProps>;
+export declare const MinimalSubtitleIcon: React.FC<IconProps>;
+export declare const MinimalScreenshotIcon: React.FC<IconProps>;
+export declare const MinimalSpeedIcon: React.FC<IconProps>;
+export interface IconSet {
+    play?: React.FC<IconProps>;
+    pause?: React.FC<IconProps>;
+    volume?: React.FC<IconProps>;
+    volumeMuted?: React.FC<IconProps>;
+    fullscreen?: React.FC<IconProps>;
+    exitFullscreen?: React.FC<IconProps>;
+    settings?: React.FC<IconProps>;
+    forward?: React.FC<IconProps>;
+    backward?: React.FC<IconProps>;
+    spinner?: React.FC<IconProps>;
+    subtitle?: React.FC<IconProps>;
+}
+export declare const defaultMinimalIcons: IconSet;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAiBzB,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAGD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAGrF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAGtF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIwC,CAAA;AAG1F,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAG5F,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAI0C,CAAA;AAGhG,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAG/F,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIqC,CAAA;AAGzF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAW9C,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIsC,CAAA;AAGzF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIoC,CAAA;AAGxF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAImC,CAAA;AAGxF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAImC,CAAA;AAGzF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIwC,CAAA;AAG5F,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIiC,CAAA;AAGvF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAI6C,CAAA;AAG9F,MAAM,WAAW,OAAO;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAChC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAA;CAC9B;AAGD,eAAO,MAAM,mBAAmB,EAAE,OAYjC,CAAA"}

package/dist/src/components/icons/index.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import BackwardIcon from "./svg-icons/BackwardIcon";
+import CameraIcon from "./svg-icons/CameraIcon";
+import ForwardIcon from "./svg-icons/ForwardIcon";
+import FullscreenEnterIcon from "./svg-icons/FullscreenEnterIcon";
+import FullscreenExitIcon from "./svg-icons/FullscreenExitIcon";
+import LoadingIcon from "./svg-icons/LoadingIcon";
+import PauseIcon from "./svg-icons/PauseIcon";
+import PlayIcon from "./svg-icons/PlayIcon";
+import PlaybackSpeedIcon from "./svg-icons/PlaybackSpeedIcon";
+import SettingsIcon from "./svg-icons/SettingsIcon";
+import SubtitleIconSVG from "./svg-icons/SubtitleIcon";
+import VolumeMutedIcon from "./svg-icons/VolumeMutedIcon";
+import VolumeTwoIcon from "./svg-icons/VolumeTwoIcon";
+// Minimal Play Icon
+export const MinimalPlayIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(PlayIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Pause Icon
+export const MinimalPauseIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(PauseIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Volume Icon
+export const MinimalVolumeIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(VolumeTwoIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Volume Muted Icon
+export const MinimalVolumeMutedIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(VolumeMutedIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Fullscreen Icon
+export const MinimalFullscreenIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(FullscreenEnterIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Exit Fullscreen Icon
+export const MinimalExitFullscreenIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(FullscreenExitIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Settings Icon
+export const MinimalSettingsIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(SettingsIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Loading Spinner
+export const MinimalSpinner = ({ size = 24, className = "", color = "currentColor" }) => (_jsx(LoadingIcon, { width: size, height: size, className: `animate-spin ${className}`, style: { color } }));
+// Minimal Forward Icon (using backward design)
+export const MinimalForwardIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(BackwardIcon, { width: size, height: size, className: className, style: { color } });
+// Minimal Backward Icon
+export const MinimalBackwardIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(ForwardIcon, { width: size, height: size, className: className, style: { color } });
+// Forward 10 seconds icon
+export const MinimalForward10Icon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(ForwardIcon, { width: size, height: size, className: className, style: { color } });
+// Backward 10 seconds icon
+export const MinimalBackward10Icon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(BackwardIcon, { width: size, height: size, className: className, style: { color } });
+// Subtitle/Caption icon
+export const MinimalSubtitleIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(SubtitleIconSVG, { width: size, height: size, className: className, style: { color } });
+// Screenshot/Camera icon
+export const MinimalScreenshotIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(CameraIcon, { width: size, height: size, className: className, style: { color } });
+// Speed icon
+export const MinimalSpeedIcon = ({ size = 24, className = "", color = "currentColor" }) => _jsx(PlaybackSpeedIcon, { width: size, height: size, className: className, style: { color } });
+// Default Icon Set
+export const defaultMinimalIcons = {
+    play: MinimalPlayIcon,
+    pause: MinimalPauseIcon,
+    volume: MinimalVolumeIcon,
+    volumeMuted: MinimalVolumeMutedIcon,
+    fullscreen: MinimalFullscreenIcon,
+    exitFullscreen: MinimalExitFullscreenIcon,
+    settings: MinimalSettingsIcon,
+    forward: MinimalForwardIcon,
+    backward: MinimalBackwardIcon,
+    spinner: MinimalSpinner,
+    subtitle: MinimalSubtitleIcon
+};