@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/LoadingState.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { AnimateLoading } from "./AnimateLoading";
+const sizeMap = {
+    sm: {
+        container: "h-8 w-8",
+        spinner: "h-6 w-6 border-2",
+        dots: "h-1.5 w-1.5"
+    },
+    md: {
+        container: "h-12 w-12",
+        spinner: "h-10 w-10 border-3",
+        dots: "h-2 w-2"
+    },
+    lg: {
+        container: "h-16 w-16",
+        spinner: "h-14 w-14 border-4",
+        dots: "h-2.5 w-2.5"
+    },
+    xl: {
+        container: "h-20 w-20",
+        spinner: "h-18 w-18 border-4",
+        dots: "h-3 w-3"
+    }
+};
+const contextStyles = {
+    initial: {
+        wrapper: "absolute inset-0 z-50 flex items-center justify-center",
+        background: "bg-black/80"
+    },
+    seeking: {
+        wrapper: "absolute inset-0 z-40 flex items-center justify-center",
+        background: "bg-black/40"
+    },
+    buffering: {
+        wrapper: "absolute inset-0 z-45 flex items-center justify-center",
+        background: "bg-black/60"
+    }
+};
+// Default AnimateLoading wrapper component
+export const AnimateLoadingWrapper = function AnimateLoadingWrapper({ context = "initial", message, className, textSize = "text-sm" }) {
+    const contextStyle = contextStyles[context];
+    const getLoadingText = () => {
+        if (message)
+            return message;
+        switch (context) {
+            case "initial":
+                return "Loading video...";
+            case "seeking":
+                return "Seeking...";
+            case "buffering":
+                return "Buffering...";
+            default:
+                return "Loading...";
+        }
+    };
+    return (_jsx("div", { className: cn(contextStyle.wrapper, contextStyle.background, className), children: _jsx(AnimateLoading, { loadingText: getLoadingText(), className: cn("text-white", textSize) }) }));
+};
+export const LoadingState = function LoadingState({ variant = "animate", context = "initial", size = "md", color, message, showMessage = true, className, style }) {
+    const sizes = sizeMap[size];
+    const contextStyle = contextStyles[context];
+    // Use AnimateLoading as default
+    if (variant === "animate") {
+        return (_jsx(AnimateLoadingWrapper, { context: context, message: message, className: className, textSize: size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm" }));
+    }
+    const renderLoadingIndicator = () => {
+        switch (variant) {
+            case "spinner":
+                return (_jsx("div", { className: cn("minimal-loading-spinner animate-spin rounded-full", "border-white/20 border-t-cyan-500", sizes.spinner, className), style: {
+                        borderTopColor: color || undefined,
+                        ...style
+                    } }));
+            case "dots":
+                return (_jsx("div", { className: "flex items-center gap-1", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn("minimal-loading-dot rounded-full bg-cyan-500", sizes.dots, className), style: {
+                            backgroundColor: color || undefined,
+                            animationDelay: `${i * 150}ms`,
+                            ...style
+                        } }, i))) }));
+            case "skeleton":
+                return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("div", { className: "minimal-loading-skeleton h-4 w-32 rounded bg-white/10" }), _jsx("div", { className: "minimal-loading-skeleton h-3 w-24 rounded bg-white/10" }), _jsx("div", { className: "minimal-loading-skeleton h-3 w-28 rounded bg-white/10" })] }));
+            default:
+                return null;
+        }
+    };
+    const getMessage = () => {
+        if (message)
+            return message;
+        switch (context) {
+            case "initial":
+                return "Loading video...";
+            case "seeking":
+                return "Seeking...";
+            case "buffering":
+                return "Buffering...";
+            default:
+                return "Loading...";
+        }
+    };
+    return (_jsx("div", { className: cn(contextStyle.wrapper, contextStyle.background), children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: cn(sizes.container, "flex items-center justify-center"), children: renderLoadingIndicator() }), showMessage && (_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "font-medium text-sm text-white/90", children: getMessage() }), context === "buffering" && (_jsx("p", { className: "mt-1 text-white/60 text-xs", children: "Please wait..." }))] }))] }) }));
+};
+export const CustomLoading = function CustomLoading({ children, context = "initial", className }) {
+    const contextStyle = contextStyles[context];
+    return (_jsx("div", { className: cn(contextStyle.wrapper, contextStyle.background, className), children: children }));
+};
+// Export default presets
+export const LoadingPresets = {
+    Initial: (props) => (_jsx(LoadingState, { variant: "animate", context: "initial", size: "md", ...props })),
+    Seeking: (props) => (_jsx(LoadingState, { variant: "animate", context: "seeking", size: "sm", ...props })),
+    Buffering: (props) => (_jsx(LoadingState, { variant: "animate", context: "buffering", size: "sm", ...props }))
+};

package/dist/src/components/LoadingState.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import React from "react"
+import { cn } from "../lib/utils"
+import { AnimateLoading } from "./AnimateLoading"
+
+export type LoadingVariant = "animate" | "spinner" | "skeleton" | "dots"
+export type LoadingContext = "initial" | "seeking" | "buffering"
+export type LoadingSize = "sm" | "md" | "lg" | "xl"
+
+export interface LoadingStateProps {
+  variant?: LoadingVariant
+  context?: LoadingContext
+  size?: LoadingSize
+  color?: string
+  message?: string
+  showMessage?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+const sizeMap: Record<LoadingSize, { container: string; spinner: string; dots: string }> = {
+  sm: {
+    container: "h-8 w-8",
+    spinner: "h-6 w-6 border-2",
+    dots: "h-1.5 w-1.5"
+  },
+  md: {
+    container: "h-12 w-12",
+    spinner: "h-10 w-10 border-3",
+    dots: "h-2 w-2"
+  },
+  lg: {
+    container: "h-16 w-16",
+    spinner: "h-14 w-14 border-4",
+    dots: "h-2.5 w-2.5"
+  },
+  xl: {
+    container: "h-20 w-20",
+    spinner: "h-18 w-18 border-4",
+    dots: "h-3 w-3"
+  }
+}
+
+const contextStyles: Record<LoadingContext, { wrapper: string; background: string }> = {
+  initial: {
+    wrapper: "absolute inset-0 z-50 flex items-center justify-center",
+    background: "bg-black/80"
+  },
+  seeking: {
+    wrapper: "absolute inset-0 z-40 flex items-center justify-center",
+    background: "bg-black/40"
+  },
+  buffering: {
+    wrapper: "absolute inset-0 z-45 flex items-center justify-center",
+    background: "bg-black/60"
+  }
+}
+
+// Default AnimateLoading wrapper component
+export const AnimateLoadingWrapper = function AnimateLoadingWrapper({
+  context = "initial",
+  message,
+  className,
+  textSize = "text-sm"
+}: {
+  context?: LoadingContext
+  message?: string
+  className?: string
+  textSize?: string
+}) {
+  const contextStyle = contextStyles[context]
+  
+  const getLoadingText = () => {
+    if (message) return message
+    
+    switch (context) {
+      case "initial":
+        return "Loading video..."
+      case "seeking":
+        return "Seeking..."
+      case "buffering":
+        return "Buffering..."
+      default:
+        return "Loading..."
+    }
+  }
+  
+  return (
+    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
+      <AnimateLoading 
+        loadingText={getLoadingText()}
+        className={cn("text-white", textSize)}
+      />
+    </div>
+  )
+}
+
+export const LoadingState = function LoadingState({
+  variant = "animate",
+  context = "initial",
+  size = "md",
+  color,
+  message,
+  showMessage = true,
+  className,
+  style
+}: LoadingStateProps) {
+  const sizes = sizeMap[size]
+  const contextStyle = contextStyles[context]
+
+  // Use AnimateLoading as default
+  if (variant === "animate") {
+    return (
+      <AnimateLoadingWrapper
+        context={context}
+        message={message}
+        className={className}
+        textSize={size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm"}
+      />
+    )
+  }
+
+  const renderLoadingIndicator = () => {
+    switch (variant) {
+      case "spinner":
+        return (
+          <div
+            className={cn(
+              "minimal-loading-spinner animate-spin rounded-full",
+              "border-white/20 border-t-cyan-500",
+              sizes.spinner,
+              className
+            )}
+            style={{
+              borderTopColor: color || undefined,
+              ...style
+            }}
+          />
+        )
+
+      case "dots":
+        return (
+          <div className="flex items-center gap-1">
+            {[0, 1, 2].map((i) => (
+              <div
+                key={i}
+                className={cn(
+                  "minimal-loading-dot rounded-full bg-cyan-500",
+                  sizes.dots,
+                  className
+                )}
+                style={{
+                  backgroundColor: color || undefined,
+                  animationDelay: `${i * 150}ms`,
+                  ...style
+                }}
+              />
+            ))}
+          </div>
+        )
+
+      case "skeleton":
+        return (
+          <div className={cn("space-y-3", className)}>
+            <div className="minimal-loading-skeleton h-4 w-32 rounded bg-white/10" />
+            <div className="minimal-loading-skeleton h-3 w-24 rounded bg-white/10" />
+            <div className="minimal-loading-skeleton h-3 w-28 rounded bg-white/10" />
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  const getMessage = () => {
+    if (message) return message
+    
+    switch (context) {
+      case "initial":
+        return "Loading video..."
+      case "seeking":
+        return "Seeking..."
+      case "buffering":
+        return "Buffering..."
+      default:
+        return "Loading..."
+    }
+  }
+
+  return (
+    <div className={cn(contextStyle.wrapper, contextStyle.background)}>
+      <div className="flex flex-col items-center gap-4">
+        <div className={cn(sizes.container, "flex items-center justify-center")}>
+          {renderLoadingIndicator()}
+        </div>
+        
+        {showMessage && (
+          <div className="text-center">
+            <p className="font-medium text-sm text-white/90">
+              {getMessage()}
+            </p>
+            {context === "buffering" && (
+              <p className="mt-1 text-white/60 text-xs">
+                Please wait...
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Custom loading component wrapper
+export interface CustomLoadingProps {
+  children: React.ReactNode
+  context?: LoadingContext
+  className?: string
+}
+
+export const CustomLoading = function CustomLoading({
+  children,
+  context = "initial",
+  className
+}: CustomLoadingProps) {
+  const contextStyle = contextStyles[context]
+  
+  return (
+    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
+      {children}
+    </div>
+  )
+}
+
+// Export default presets
+export const LoadingPresets = {
+  Initial: (props: Partial<LoadingStateProps>) => (
+    <LoadingState variant="animate" context="initial" size="md" {...props} />
+  ),
+  Seeking: (props: Partial<LoadingStateProps>) => (
+    <LoadingState variant="animate" context="seeking" size="sm" {...props} />
+  ),
+  Buffering: (props: Partial<LoadingStateProps>) => (
+    <LoadingState variant="animate" context="buffering" size="sm" {...props} />
+  )
+}

package/dist/src/components/accessibility/keyboard-help-overlay.d.ts

@@ -0,0 +1,17 @@
+interface KeyboardHelpOverlayProps {
+    isOpen: boolean;
+    onClose: () => void;
+    shortcuts: Array<{
+        key: string;
+        description: string;
+        modifiers?: {
+            ctrl?: boolean;
+            alt?: boolean;
+            shift?: boolean;
+        };
+    }>;
+    className?: string;
+}
+export declare function KeyboardHelpOverlay({ isOpen, onClose, shortcuts, className }: KeyboardHelpOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=keyboard-help-overlay.d.ts.map

package/dist/src/components/accessibility/keyboard-help-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-help-overlay.d.ts","sourceRoot":"","sources":["keyboard-help-overlay.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,KAAK,CAAC;QACf,GAAG,EAAE,MAAM,CAAA;QACX,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE;YACV,IAAI,CAAC,EAAE,OAAO,CAAA;YACd,GAAG,CAAC,EAAE,OAAO,CAAA;YACb,KAAK,CAAC,EAAE,OAAO,CAAA;SAChB,CAAA;KACF,CAAC,CAAA;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,EACV,EAAE,wBAAwB,kDA4L1B"}

package/dist/src/components/accessibility/keyboard-help-overlay.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../lib/utils';
+export function KeyboardHelpOverlay({ isOpen, onClose, shortcuts, className }) {
+    // Handle escape key to close
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // Focus trap within the overlay
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const overlay = document.querySelector('[data-keyboard-help-overlay]');
+        if (!overlay)
+            return;
+        const focusableElements = Array.from(overlay.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        // Focus the close button initially
+        const closeButton = overlay.querySelector('[data-close-button]');
+        closeButton?.focus();
+        const handleTabKey = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleTabKey);
+        return () => document.removeEventListener('keydown', handleTabKey);
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const formatKey = (key, modifiers) => {
+        const parts = [];
+        if (modifiers?.ctrl)
+            parts.push('Ctrl');
+        if (modifiers?.alt)
+            parts.push('Alt');
+        if (modifiers?.shift)
+            parts.push('Shift');
+        // Format special keys
+        let keyDisplay = key;
+        switch (key) {
+            case ' ':
+                keyDisplay = 'Space';
+                break;
+            case 'ArrowUp':
+                keyDisplay = '↑';
+                break;
+            case 'ArrowDown':
+                keyDisplay = '↓';
+                break;
+            case 'ArrowLeft':
+                keyDisplay = '←';
+                break;
+            case 'ArrowRight':
+                keyDisplay = '→';
+                break;
+            default:
+                keyDisplay = key.toUpperCase();
+        }
+        parts.push(keyDisplay);
+        return parts.join(' + ');
+    };
+    return (_jsx("div", { className: cn('fixed inset-0 z-50 flex items-center justify-center bg-black/50', 'backdrop-blur-sm', className), "data-keyboard-help-overlay": true, onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        }, role: "dialog", "aria-modal": "true", "aria-labelledby": "keyboard-help-title", "aria-describedby": "keyboard-help-description", children: _jsxs("div", { className: cn('w-full max-w-md rounded-lg bg-white p-6 shadow-xl', 'dark:bg-gray-900 dark:text-white', 'focus-within:outline-none', "fade-in-0 zoom-in-95 animate-in duration-200"), children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h2", { id: "keyboard-help-title", className: "font-semibold text-lg", children: "Keyboard Shortcuts" }), _jsx("button", { "data-close-button": true, onClick: onClose, className: cn('rounded-md p-2 text-gray-500 transition-colors', 'hover:bg-gray-100 hover:text-gray-700', 'focus:outline-none focus:ring-2 focus:ring-blue-500', 'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'), "aria-label": "Close keyboard shortcuts help", children: _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("p", { id: "keyboard-help-description", className: "mb-4 text-gray-600 text-sm dark:text-gray-400", children: "Use these keyboard shortcuts to control the media player:" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: _jsx("dl", { className: "space-y-3", children: shortcuts.map(({ key, description, modifiers }, index) => (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("dt", { className: "text-gray-600 text-sm dark:text-gray-400", children: description }), _jsx("dd", { children: _jsx("kbd", { className: cn("inline-flex items-center rounded px-2 py-1 font-mono text-xs", "border border-gray-300 bg-gray-100 text-gray-800", "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"), children: formatKey(key, modifiers) }) })] }, `${key}-${index}`))) }) }), _jsxs("div", { className: "mt-4 text-gray-500 text-xs dark:text-gray-400", children: ["Press ", _jsx("kbd", { className: "rounded bg-gray-100 px-1 dark:bg-gray-800", children: "Esc" }), " to close this help"] })] }) }));
+}

package/dist/src/components/accessibility/keyboard-help-overlay.tsx

@@ -0,0 +1,213 @@
+import React from 'react'
+import { cn } from '../../lib/utils'
+import type { KeyboardShortcut } from '../../hooks/accessibility/use-keyboard-shortcuts'
+
+interface KeyboardHelpOverlayProps {
+  isOpen: boolean
+  onClose: () => void
+  shortcuts: Array<{
+    key: string
+    description: string
+    modifiers?: {
+      ctrl?: boolean
+      alt?: boolean
+      shift?: boolean
+    }
+  }>
+  className?: string
+}
+
+export function KeyboardHelpOverlay({
+  isOpen,
+  onClose,
+  shortcuts,
+  className
+}: KeyboardHelpOverlayProps) {
+  // Handle escape key to close
+  React.useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  // Focus trap within the overlay
+  React.useEffect(() => {
+    if (!isOpen) return
+
+    const overlay = document.querySelector('[data-keyboard-help-overlay]')
+    if (!overlay) return
+
+    const focusableElements = Array.from(
+      overlay.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ) as HTMLElement[]
+
+    if (focusableElements.length === 0) return
+
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    // Focus the close button initially
+    const closeButton = overlay.querySelector('[data-close-button]') as HTMLElement
+    closeButton?.focus()
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement.focus()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleTabKey)
+    return () => document.removeEventListener('keydown', handleTabKey)
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  const formatKey = (key: string, modifiers?: { ctrl?: boolean; alt?: boolean; shift?: boolean }) => {
+    const parts = []
+    
+    if (modifiers?.ctrl) parts.push('Ctrl')
+    if (modifiers?.alt) parts.push('Alt')
+    if (modifiers?.shift) parts.push('Shift')
+    
+    // Format special keys
+    let keyDisplay = key
+    switch (key) {
+      case ' ':
+        keyDisplay = 'Space'
+        break
+      case 'ArrowUp':
+        keyDisplay = '↑'
+        break
+      case 'ArrowDown':
+        keyDisplay = '↓'
+        break
+      case 'ArrowLeft':
+        keyDisplay = '←'
+        break
+      case 'ArrowRight':
+        keyDisplay = '→'
+        break
+      default:
+        keyDisplay = key.toUpperCase()
+    }
+    
+    parts.push(keyDisplay)
+    return parts.join(' + ')
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center bg-black/50',
+        'backdrop-blur-sm',
+        className
+      )}
+      data-keyboard-help-overlay
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose()
+        }
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="keyboard-help-title"
+      aria-describedby="keyboard-help-description"
+    >
+      <div className={cn(
+        'w-full max-w-md rounded-lg bg-white p-6 shadow-xl',
+        'dark:bg-gray-900 dark:text-white',
+        'focus-within:outline-none',
+        "fade-in-0 zoom-in-95 animate-in duration-200"
+      )}>
+        <div className="mb-4 flex items-center justify-between">
+          <h2
+            id="keyboard-help-title"
+            className="font-semibold text-lg"
+          >
+            Keyboard Shortcuts
+          </h2>
+          <button
+            data-close-button
+            onClick={onClose}
+            className={cn(
+              'rounded-md p-2 text-gray-500 transition-colors',
+              'hover:bg-gray-100 hover:text-gray-700',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500',
+              'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'
+            )}
+            aria-label="Close keyboard shortcuts help"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <p
+          id="keyboard-help-description"
+          className="mb-4 text-gray-600 text-sm dark:text-gray-400"
+        >
+          Use these keyboard shortcuts to control the media player:
+        </p>
+
+        <div className="max-h-64 overflow-y-auto">
+          <dl className="space-y-3">
+            {shortcuts.map(({ key, description, modifiers }, index) => (
+              <div
+                key={`${key}-${index}`}
+                className="flex items-center justify-between"
+              >
+                <dt className="text-gray-600 text-sm dark:text-gray-400">
+                  {description}
+                </dt>
+                <dd>
+                  <kbd className={cn(
+                    "inline-flex items-center rounded px-2 py-1 font-mono text-xs",
+                    "border border-gray-300 bg-gray-100 text-gray-800",
+                    "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+                  )}>
+                    {formatKey(key, modifiers)}
+                  </kbd>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+
+        <div className="mt-4 text-gray-500 text-xs dark:text-gray-400">
+          Press <kbd className="rounded bg-gray-100 px-1 dark:bg-gray-800">Esc</kbd> to close this help
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/src/components/audio-player.d.ts

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

package/dist/src/components/audio-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-player.d.ts","sourceRoot":"","sources":["audio-player.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,eAAO,MAAM,WAAW,6GA0EvB,CAAA"}