@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/icons/components/animated/LoadingIcon.tsx

@@ -1,43 +1,27 @@
-import type { IconProps } from '../../types'
-import { useIconTheme, useCustomIcon } from '../../provider'
+import { useCustomIcon, useIconTheme } from "../../provider"
+import type { IconProps } from "../../types"
 
 export function LoadingIcon(props: IconProps) {
-  const theme = useIconTheme()
-  const customIcon = useCustomIcon('loading')
-  
-  if (customIcon) {
-    return customIcon(props)
-  }
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    className = theme.className,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      className={`animate-spin ${className || ''}`}
-      aria-hidden="true"
-      {...rest}
-    >
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke={color}
-        strokeWidth="4"
-        strokeOpacity="0.25"
-      />
-      <path
-        fill={color}
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-      />
-    </svg>
-  )
-}
+	const theme = useIconTheme()
+	const customIcon = useCustomIcon("loading")
+
+	if (customIcon) {
+		return customIcon(props)
+	}
+
+	const { size = theme.size, color = theme.color, className = theme.className, ...rest } = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			className={`animate-spin ${className || ""}`}
+			aria-hidden="true"
+			{...rest}>
+			<circle cx="12" cy="12" r="10" stroke={color} strokeWidth="4" strokeOpacity="0.25" />
+			<path fill={color} d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+		</svg>
+	)
+}

package/src/icons/components/animated/PlayPauseIcon.tsx

@@ -1,50 +1,42 @@
-import type { IconProps } from '../../types'
-import { useIconTheme } from '../../provider'
+import { useIconTheme } from "../../provider"
+import type { IconProps } from "../../types"
 
 interface PlayPauseIconProps extends IconProps {
-  isPlaying: boolean
+	isPlaying: boolean
 }
 
-export function PlayPauseIcon({ isPlaying, className = '', ...props }: PlayPauseIconProps) {
-  const theme = useIconTheme()
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    strokeWidth = theme.strokeWidth,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-      aria-hidden="true"
-      {...rest}
-    >
-      {/* Play icon */}
-      <g
-        className={`origin-center transition-all duration-300 ${isPlaying ? "scale-75 opacity-0" : "scale-100 opacity-100"}
-        `}
-      >
-        <polygon points="5 3 19 12 5 21 5 3" />
-      </g>
-      
-      {/* Pause icon */}
-      <g
-        className={`origin-center transition-all duration-300 ${isPlaying ? "scale-100 opacity-100" : "scale-75 opacity-0"}
-        `}
-      >
-        <rect x="6" y="4" width="4" height="16" />
-        <rect x="14" y="4" width="4" height="16" />
-      </g>
-    </svg>
-  )
-}
+export function PlayPauseIcon({ isPlaying, className = "", ...props }: PlayPauseIconProps) {
+	const theme = useIconTheme()
+
+	const { size = theme.size, color = theme.color, strokeWidth = theme.strokeWidth, ...rest } = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden="true"
+			{...rest}>
+			{/* Play icon */}
+			<g
+				className={`origin-center transition-all duration-300 ${isPlaying ? "scale-75 opacity-0" : "scale-100 opacity-100"}
+        `}>
+				<polygon points="5 3 19 12 5 21 5 3" />
+			</g>
+
+			{/* Pause icon */}
+			<g
+				className={`origin-center transition-all duration-300 ${isPlaying ? "scale-100 opacity-100" : "scale-75 opacity-0"}
+        `}>
+				<rect x="6" y="4" width="4" height="16" />
+				<rect x="14" y="4" width="4" height="16" />
+			</g>
+		</svg>
+	)
+}

package/src/icons/components/media/PauseIcon.tsx

@@ -1,39 +1,38 @@
-import type { IconProps } from '../../types'
-import { useIconTheme, useCustomIcon } from '../../provider'
+import { useCustomIcon, useIconTheme } from "../../provider"
+import type { IconProps } from "../../types"
 
 export function PauseIcon(props: IconProps) {
-  const theme = useIconTheme()
-  const customIcon = useCustomIcon('pause')
-  
-  // If there's a custom icon, use it
-  if (customIcon) {
-    return customIcon(props)
-  }
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    strokeWidth = theme.strokeWidth,
-    className = theme.className,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-      aria-hidden="true"
-      {...rest}
-    >
-      <rect x="6" y="4" width="4" height="16" />
-      <rect x="14" y="4" width="4" height="16" />
-    </svg>
-  )
-}
+	const theme = useIconTheme()
+	const customIcon = useCustomIcon("pause")
+
+	// If there's a custom icon, use it
+	if (customIcon) {
+		return customIcon(props)
+	}
+
+	const {
+		size = theme.size,
+		color = theme.color,
+		strokeWidth = theme.strokeWidth,
+		className = theme.className,
+		...rest
+	} = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden="true"
+			{...rest}>
+			<rect x="6" y="4" width="4" height="16" />
+			<rect x="14" y="4" width="4" height="16" />
+		</svg>
+	)
+}

package/src/icons/components/media/PlayIcon.tsx

@@ -1,38 +1,37 @@
-import type { IconProps } from '../../types'
-import { useIconTheme, useCustomIcon } from '../../provider'
+import { useCustomIcon, useIconTheme } from "../../provider"
+import type { IconProps } from "../../types"
 
 export function PlayIcon(props: IconProps) {
-  const theme = useIconTheme()
-  const customIcon = useCustomIcon('play')
-  
-  // If there's a custom icon, use it
-  if (customIcon) {
-    return customIcon(props)
-  }
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    strokeWidth = theme.strokeWidth,
-    className = theme.className,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-      aria-hidden="true"
-      {...rest}
-    >
-      <polygon points="5 3 19 12 5 21 5 3" />
-    </svg>
-  )
-}
+	const theme = useIconTheme()
+	const customIcon = useCustomIcon("play")
+
+	// If there's a custom icon, use it
+	if (customIcon) {
+		return customIcon(props)
+	}
+
+	const {
+		size = theme.size,
+		color = theme.color,
+		strokeWidth = theme.strokeWidth,
+		className = theme.className,
+		...rest
+	} = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden="true"
+			{...rest}>
+			<polygon points="5 3 19 12 5 21 5 3" />
+		</svg>
+	)
+}

package/src/icons/components/volume/VolumeIcon.tsx

@@ -1,39 +1,38 @@
-import type { IconProps } from '../../types'
-import { useIconTheme, useCustomIcon } from '../../provider'
+import { useCustomIcon, useIconTheme } from "../../provider"
+import type { IconProps } from "../../types"
 
 export function VolumeIcon(props: IconProps) {
-  const theme = useIconTheme()
-  const customIcon = useCustomIcon('volume')
-  
-  if (customIcon) {
-    return customIcon(props)
-  }
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    strokeWidth = theme.strokeWidth,
-    className = theme.className,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-      aria-hidden="true"
-      {...rest}
-    >
-      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-      <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
-      <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
-    </svg>
-  )
-}
+	const theme = useIconTheme()
+	const customIcon = useCustomIcon("volume")
+
+	if (customIcon) {
+		return customIcon(props)
+	}
+
+	const {
+		size = theme.size,
+		color = theme.color,
+		strokeWidth = theme.strokeWidth,
+		className = theme.className,
+		...rest
+	} = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden="true"
+			{...rest}>
+			<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+			<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+			<path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+		</svg>
+	)
+}

package/src/icons/components/volume/VolumeOffIcon.tsx

@@ -1,39 +1,38 @@
-import type { IconProps } from '../../types'
-import { useIconTheme, useCustomIcon } from '../../provider'
+import { useCustomIcon, useIconTheme } from "../../provider"
+import type { IconProps } from "../../types"
 
 export function VolumeOffIcon(props: IconProps) {
-  const theme = useIconTheme()
-  const customIcon = useCustomIcon('volume-off')
-  
-  if (customIcon) {
-    return customIcon(props)
-  }
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    strokeWidth = theme.strokeWidth,
-    className = theme.className,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-      aria-hidden="true"
-      {...rest}
-    >
-      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-      <line x1="23" y1="9" x2="17" y2="15" />
-      <line x1="17" y1="9" x2="23" y2="15" />
-    </svg>
-  )
-}
+	const theme = useIconTheme()
+	const customIcon = useCustomIcon("volume-off")
+
+	if (customIcon) {
+		return customIcon(props)
+	}
+
+	const {
+		size = theme.size,
+		color = theme.color,
+		strokeWidth = theme.strokeWidth,
+		className = theme.className,
+		...rest
+	} = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden="true"
+			{...rest}>
+			<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+			<line x1="23" y1="9" x2="17" y2="15" />
+			<line x1="17" y1="9" x2="23" y2="15" />
+		</svg>
+	)
+}

package/src/icons/index.ts

@@ -1,56 +1,56 @@
 // Export types
-export type { IconProps, IconTheme, IconName, IconComponent, IconSet } from './types'
+export type { IconProps, IconTheme, IconName, IconComponent, IconSet } from "./types"
 
 // Export provider and hooks
-export { IconProvider, useIconTheme, useIcon, useCustomIcon } from './provider'
+export { IconProvider, useIconTheme, useIcon, useCustomIcon } from "./provider"
 
 // Export media icons
-export { PlayIcon } from './components/media/PlayIcon'
-export { PauseIcon } from './components/media/PauseIcon'
+export { PlayIcon } from "./components/media/PlayIcon"
+export { PauseIcon } from "./components/media/PauseIcon"
 
-// Export volume icons  
-export { VolumeIcon } from './components/volume/VolumeIcon'
-export { VolumeOffIcon } from './components/volume/VolumeOffIcon'
+// Export volume icons
+export { VolumeIcon } from "./components/volume/VolumeIcon"
+export { VolumeOffIcon } from "./components/volume/VolumeOffIcon"
 
 // Export animated icons
-export { LoadingIcon } from './components/animated/LoadingIcon'
-export { PlayPauseIcon } from './components/animated/PlayPauseIcon'
+export { LoadingIcon } from "./components/animated/LoadingIcon"
+export { PlayPauseIcon } from "./components/animated/PlayPauseIcon"
 
 // Export other icons
-export { SettingsIcon } from './components/SettingsIcon'
-export { FullscreenIcon } from './components/FullscreenIcon'
+export { SettingsIcon } from "./components/SettingsIcon"
+export { FullscreenIcon } from "./components/FullscreenIcon"
 
+import { FullscreenIcon } from "./components/FullscreenIcon"
+import { SettingsIcon } from "./components/SettingsIcon"
+import { LoadingIcon } from "./components/animated/LoadingIcon"
+import { PauseIcon } from "./components/media/PauseIcon"
 // Create a complete icon map for dynamic usage
-import { PlayIcon } from './components/media/PlayIcon'
-import { PauseIcon } from './components/media/PauseIcon'
-import { VolumeIcon } from './components/volume/VolumeIcon'
-import { VolumeOffIcon } from './components/volume/VolumeOffIcon'
-import { LoadingIcon } from './components/animated/LoadingIcon'
-import { SettingsIcon } from './components/SettingsIcon'
-import { FullscreenIcon } from './components/FullscreenIcon'
+import { PlayIcon } from "./components/media/PlayIcon"
+import { VolumeIcon } from "./components/volume/VolumeIcon"
+import { VolumeOffIcon } from "./components/volume/VolumeOffIcon"
 
 export const Icons = {
-  PlayIcon,
-  PauseIcon,
-  VolumeIcon,
-  VolumeOffIcon,
-  LoadingIcon,
-  SettingsIcon,
-  FullscreenIcon
+	PlayIcon,
+	PauseIcon,
+	VolumeIcon,
+	VolumeOffIcon,
+	LoadingIcon,
+	SettingsIcon,
+	FullscreenIcon
 }
 
 // Utility function to get icon by name
 export function getIcon(name: string) {
-  const iconMap: Record<string, keyof typeof Icons> = {
-    'play': 'PlayIcon',
-    'pause': 'PauseIcon',
-    'volume': 'VolumeIcon',
-    'volume-off': 'VolumeOffIcon',
-    'loading': 'LoadingIcon',
-    'settings': 'SettingsIcon',
-    'fullscreen': 'FullscreenIcon'
-  }
-  
-  const iconKey = iconMap[name]
-  return iconKey ? Icons[iconKey] : null
-}
+	const iconMap: Record<string, keyof typeof Icons> = {
+		play: "PlayIcon",
+		pause: "PauseIcon",
+		volume: "VolumeIcon",
+		"volume-off": "VolumeOffIcon",
+		loading: "LoadingIcon",
+		settings: "SettingsIcon",
+		fullscreen: "FullscreenIcon"
+	}
+
+	const iconKey = iconMap[name]
+	return iconKey ? Icons[iconKey] : null
+}