@livepeer-frameworks/player-react 0.0.4 → 0.1.1

package/src/hooks/useStreamState.ts

@@ -1,10 +1,5 @@
-import { useEffect, useState, useRef, useCallback } from 'react';
-import type {
-  UseStreamStateOptions,
-  StreamState,
-  StreamStatus,
-  MistStreamInfo,
-} from '../types';
+import { useEffect, useState, useRef, useCallback } from "react";
+import type { UseStreamStateOptions, StreamState, StreamStatus, MistStreamInfo } from "../types";
 
 /**
  * Parse MistServer error string into StreamStatus enum
@@ -12,14 +7,14 @@ import type {
 function parseErrorToStatus(error: string): StreamStatus {
   const lowerError = error.toLowerCase();
 
-  if (lowerError.includes('offline')) return 'OFFLINE';
-  if (lowerError.includes('initializing')) return 'INITIALIZING';
-  if (lowerError.includes('booting')) return 'BOOTING';
-  if (lowerError.includes('waiting for data')) return 'WAITING_FOR_DATA';
-  if (lowerError.includes('shutting down')) return 'SHUTTING_DOWN';
-  if (lowerError.includes('invalid')) return 'INVALID';
+  if (lowerError.includes("offline")) return "OFFLINE";
+  if (lowerError.includes("initializing")) return "INITIALIZING";
+  if (lowerError.includes("booting")) return "BOOTING";
+  if (lowerError.includes("waiting for data")) return "WAITING_FOR_DATA";
+  if (lowerError.includes("shutting down")) return "SHUTTING_DOWN";
+  if (lowerError.includes("invalid")) return "INVALID";
 
-  return 'ERROR';
+  return "ERROR";
 }
 
 /**
@@ -27,25 +22,25 @@ function parseErrorToStatus(error: string): StreamStatus {
  */
 function getStatusMessage(status: StreamStatus, percentage?: number): string {
   switch (status) {
-    case 'ONLINE':
-      return 'Stream is online';
-    case 'OFFLINE':
-      return 'Stream is offline';
-    case 'INITIALIZING':
+    case "ONLINE":
+      return "Stream is online";
+    case "OFFLINE":
+      return "Stream is offline";
+    case "INITIALIZING":
       return percentage !== undefined
         ? `Initializing... ${Math.round(percentage * 10) / 10}%`
-        : 'Stream is initializing';
-    case 'BOOTING':
-      return 'Stream is starting up';
-    case 'WAITING_FOR_DATA':
-      return 'Waiting for stream data';
-    case 'SHUTTING_DOWN':
-      return 'Stream is shutting down';
-    case 'INVALID':
-      return 'Stream status is invalid';
-    case 'ERROR':
+        : "Stream is initializing";
+    case "BOOTING":
+      return "Stream is starting up";
+    case "WAITING_FOR_DATA":
+      return "Waiting for stream data";
+    case "SHUTTING_DOWN":
+      return "Stream is shutting down";
+    case "INVALID":
+      return "Stream status is invalid";
+    case "ERROR":
     default:
-      return 'Stream error';
+      return "Stream error";
   }
 }
 
@@ -53,9 +48,9 @@ function getStatusMessage(status: StreamStatus, percentage?: number): string {
  * Initial stream state
  */
 const initialState: StreamState = {
-  status: 'OFFLINE',
+  status: "OFFLINE",
   isOnline: false,
-  message: 'Connecting...',
+  message: "Connecting...",
   lastUpdate: 0,
 };
 
@@ -70,7 +65,7 @@ const initialState: StreamState = {
  * ```tsx
  * const { status, isOnline, message } = useStreamState({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  *   pollInterval: 3000,
  * });
  * ```
@@ -115,7 +110,7 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
       const status = parseErrorToStatus(data.error);
       const message = data.on_error || getStatusMessage(status, data.perc);
 
-      setState(prev => ({
+      setState((prev) => ({
         status,
         isOnline: false,
         message,
@@ -128,10 +123,10 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
       // Stream is online with valid metadata
       // Merge new data with existing streamInfo to preserve source/tracks from initial fetch
       // WebSocket updates may not include source array - only status updates
-      setState(prev => {
+      setState((prev) => {
         const mergedStreamInfo: MistStreamInfo = {
-          ...prev.streamInfo,  // Keep existing source/meta if present
-          ...data,             // Override with new data
+          ...prev.streamInfo, // Keep existing source/meta if present
+          ...data, // Override with new data
           // Explicitly preserve source if not in new data
           source: data.source || prev.streamInfo?.source,
           // Merge meta to preserve tracks
@@ -144,9 +139,9 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
         };
 
         return {
-          status: 'ONLINE',
+          status: "ONLINE",
           isOnline: true,
-          message: 'Stream is online',
+          message: "Stream is online",
           lastUpdate: Date.now(),
           streamInfo: mergedStreamInfo,
         };
@@ -163,11 +158,11 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
 
     try {
       // Build URL with MistPlayer-style params
-      const baseUrl = `${mistBaseUrl.replace(/\/$/, '')}/json_${encodeURIComponent(streamName)}.js`;
+      const baseUrl = `${mistBaseUrl.replace(/\/$/, "")}/json_${encodeURIComponent(streamName)}.js`;
       const url = `${baseUrl}?metaeverywhere=1&inclzero=1`;
       const response = await fetch(url, {
-        method: 'GET',
-        headers: { 'Accept': 'application/json' },
+        method: "GET",
+        headers: { Accept: "application/json" },
       });
 
       if (!response.ok) {
@@ -187,13 +182,13 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
     } catch (error) {
       if (!mountedRef.current) return;
 
-      setState(prev => ({
+      setState((prev) => ({
         ...prev,
-        status: 'ERROR',
+        status: "ERROR",
         isOnline: false,
-        message: error instanceof Error ? error.message : 'Connection failed',
+        message: error instanceof Error ? error.message : "Connection failed",
         lastUpdate: Date.now(),
-        error: error instanceof Error ? error.message : 'Unknown error',
+        error: error instanceof Error ? error.message : "Unknown error",
       }));
     }
 
@@ -222,9 +217,9 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
     try {
       // Convert http(s) to ws(s)
       const wsUrl = mistBaseUrl
-        .replace(/^http:/, 'ws:')
-        .replace(/^https:/, 'wss:')
-        .replace(/\/$/, '');
+        .replace(/^http:/, "ws:")
+        .replace(/^https:/, "wss:")
+        .replace(/\/$/, "");
 
       // Build URL with MistPlayer-style params
       const url = `${wsUrl}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`;
@@ -235,7 +230,7 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
       wsTimeoutRef.current = setTimeout(() => {
         if (ws.readyState <= WebSocket.OPEN) {
           if (debug) {
-            console.debug('[useStreamState] WebSocket timeout (5s), falling back to HTTP polling');
+            console.debug("[useStreamState] WebSocket timeout (5s), falling back to HTTP polling");
           }
           ws.close();
           pollHttp();
@@ -244,7 +239,7 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
 
       ws.onopen = () => {
         if (debug) {
-          console.debug('[useStreamState] WebSocket connected');
+          console.debug("[useStreamState] WebSocket connected");
         }
         setSocketReady(true);
       };
@@ -260,12 +255,12 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
           const data = JSON.parse(event.data) as MistStreamInfo;
           processStreamInfo(data);
         } catch (e) {
-          console.warn('[useStreamState] Failed to parse WebSocket message:', e);
+          console.warn("[useStreamState] Failed to parse WebSocket message:", e);
         }
       };
 
-      ws.onerror = (event) => {
-        console.warn('[useStreamState] WebSocket error, falling back to HTTP polling');
+      ws.onerror = (_event) => {
+        console.warn("[useStreamState] WebSocket error, falling back to HTTP polling");
         if (wsTimeoutRef.current) {
           clearTimeout(wsTimeoutRef.current);
           wsTimeoutRef.current = null;
@@ -281,12 +276,12 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
 
         // Fallback to HTTP polling or reconnect
         if (debug) {
-          console.debug('[useStreamState] WebSocket closed, starting HTTP polling');
+          console.debug("[useStreamState] WebSocket closed, starting HTTP polling");
         }
         pollHttp();
       };
     } catch (error) {
-      console.warn('[useStreamState] WebSocket connection failed:', error);
+      console.warn("[useStreamState] WebSocket connection failed:", error);
       // Fallback to HTTP polling
       pollHttp();
     }
@@ -320,7 +315,7 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
     // Reset state when stream changes
     setState({
       ...initialState,
-      message: 'Connecting...',
+      message: "Connecting...",
       lastUpdate: Date.now(),
     });
 
@@ -342,7 +337,7 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
       // Set mounted=false FIRST before any other cleanup
       mountedRef.current = false;
       if (debug) {
-        console.debug('[useStreamState] cleanup starting, mountedRef set to false');
+        console.debug("[useStreamState] cleanup starting, mountedRef set to false");
       }
 
       // Cleanup WebSocket timeout

package/src/hooks/useTelemetry.ts

@@ -1,5 +1,10 @@
-import { useEffect, useRef, useCallback } from 'react';
-import { TelemetryReporter, type TelemetryOptions, type PlaybackQuality, type ContentType } from '@livepeer-frameworks/player-core';
+import { useEffect, useRef, useCallback } from "react";
+import {
+  TelemetryReporter,
+  type TelemetryOptions,
+  type PlaybackQuality,
+  type ContentType,
+} from "@livepeer-frameworks/player-core";
 
 export interface UseTelemetryOptions extends TelemetryOptions {
   /** Video element to monitor */
@@ -36,7 +41,7 @@ export interface UseTelemetryOptions extends TelemetryOptions {
  *   endpoint: '/api/telemetry',
  *   interval: 5000,
  *   videoElement,
- *   contentId: 'my-stream',
+ *   contentId: 'pk_...', // playbackId (view key)
  *   contentType: 'live',
  *   playerType: 'hlsjs',
  *   protocol: 'HLS',
@@ -87,7 +92,17 @@ export function useTelemetry(options: UseTelemetryOptions) {
       reporterRef.current?.stop();
       reporterRef.current = null;
     };
-  }, [enabled, endpoint, authToken, interval, batchSize, contentId, contentType, playerType, protocol]);
+  }, [
+    enabled,
+    endpoint,
+    authToken,
+    interval,
+    batchSize,
+    contentId,
+    contentType,
+    playerType,
+    protocol,
+  ]);
 
   // Start/stop reporting when video element changes
   useEffect(() => {

package/src/hooks/useViewerEndpoints.ts

@@ -1,14 +1,14 @@
-import { useEffect, useState, useRef } from 'react';
-import type { ContentType } from '@livepeer-frameworks/player-core';
-import type { ContentEndpoints } from '../types';
+import { useEffect, useState, useRef } from "react";
+import type { ContentType } from "@livepeer-frameworks/player-core";
+import type { ContentEndpoints } from "../types";
 
 const MAX_RETRIES = 3;
 const INITIAL_DELAY_MS = 500;
 
 interface Params {
   gatewayUrl: string;
-  contentType: ContentType;
   contentId: string;
+  contentType?: ContentType;
   authToken?: string;
 }
 
@@ -25,7 +25,7 @@ async function fetchWithRetry(
       const response = await fetch(url, options);
       return response;
     } catch (e) {
-      lastError = e instanceof Error ? e : new Error('Fetch failed');
+      lastError = e instanceof Error ? e : new Error("Fetch failed");
 
       // Don't retry on abort
       if (options.signal?.aborted) {
@@ -35,24 +35,31 @@ async function fetchWithRetry(
       // Wait before retrying (exponential backoff)
       if (attempt < maxRetries - 1) {
         const delay = initialDelay * Math.pow(2, attempt);
-        console.warn(`[useViewerEndpoints] Retry ${attempt + 1}/${maxRetries - 1} after ${delay}ms`);
-        await new Promise(resolve => setTimeout(resolve, delay));
+        console.warn(
+          `[useViewerEndpoints] Retry ${attempt + 1}/${maxRetries - 1} after ${delay}ms`
+        );
+        await new Promise((resolve) => setTimeout(resolve, delay));
       }
     }
   }
 
-  throw lastError ?? new Error('Gateway unreachable after retries');
+  throw lastError ?? new Error("Gateway unreachable after retries");
 }
 
-export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authToken }: Params) {
+export function useViewerEndpoints({
+  gatewayUrl,
+  contentType: _contentType,
+  contentId,
+  authToken,
+}: Params) {
   const [endpoints, setEndpoints] = useState<ContentEndpoints | null>(null);
-  const [status, setStatus] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle');
+  const [status, setStatus] = useState<"idle" | "loading" | "ready" | "error">("idle");
   const [error, setError] = useState<string | null>(null);
   const abortRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
-    if (!gatewayUrl || !contentType || !contentId) return;
-    setStatus('loading');
+    if (!gatewayUrl || !contentId) return;
+    setStatus("loading");
     setError(null);
     abortRef.current?.abort();
     const ac = new AbortController();
@@ -60,10 +67,10 @@ export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authTok
 
     (async () => {
       try {
-        const graphqlEndpoint = gatewayUrl.replace(/\/$/, '');
+        const graphqlEndpoint = gatewayUrl.replace(/\/$/, "");
         const query = `
-          query ResolveViewer($contentType: String!, $contentId: String!) {
-            resolveViewerEndpoint(contentType: $contentType, contentId: $contentId) {
+          query ResolveViewer($contentId: String!) {
+            resolveViewerEndpoint(contentId: $contentId) {
               primary { nodeId baseUrl protocol url geoDistance loadScore outputs }
               fallbacks { nodeId baseUrl protocol url geoDistance loadScore outputs }
               metadata { contentType contentId title description durationSeconds status isLive viewers recordingSizeBytes clipSource createdAt }
@@ -71,50 +78,53 @@ export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authTok
           }
         `;
         const res = await fetchWithRetry(graphqlEndpoint, {
-          method: 'POST',
+          method: "POST",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
             ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
           },
-          body: JSON.stringify({ query, variables: { contentType, contentId } }),
+          body: JSON.stringify({ query, variables: { contentId } }),
           signal: ac.signal,
         });
         if (!res.ok) throw new Error(`Gateway GQL error ${res.status}`);
         const payload = await res.json();
-        if (payload.errors?.length) throw new Error(payload.errors[0]?.message || 'GraphQL error');
+        if (payload.errors?.length) throw new Error(payload.errors[0]?.message || "GraphQL error");
         const resp = payload.data?.resolveViewerEndpoint;
         const primary = resp?.primary;
         const fallbacks = Array.isArray(resp?.fallbacks) ? resp.fallbacks : [];
-        if (!primary) throw new Error('No endpoints');
+        if (!primary) throw new Error("No endpoints");
 
         // Parse outputs JSON string (GraphQL returns JSON scalar as string)
-        if (primary.outputs && typeof primary.outputs === 'string') {
-          try { primary.outputs = JSON.parse(primary.outputs); } catch {}
+        if (primary.outputs && typeof primary.outputs === "string") {
+          try {
+            primary.outputs = JSON.parse(primary.outputs);
+          } catch {}
         }
         if (fallbacks) {
           fallbacks.forEach((fb: any) => {
-            if (fb.outputs && typeof fb.outputs === 'string') {
-              try { fb.outputs = JSON.parse(fb.outputs); } catch {}
+            if (fb.outputs && typeof fb.outputs === "string") {
+              try {
+                fb.outputs = JSON.parse(fb.outputs);
+              } catch {}
             }
           });
         }
 
         setEndpoints({ primary, fallbacks, metadata: resp?.metadata });
-        setStatus('ready');
+        setStatus("ready");
       } catch (e) {
         if (ac.signal.aborted) return;
-        const message = e instanceof Error ? e.message : 'Unknown gateway error';
-        console.error('[useViewerEndpoints] Gateway resolution failed:', message);
+        const message = e instanceof Error ? e.message : "Unknown gateway error";
+        console.error("[useViewerEndpoints] Gateway resolution failed:", message);
         setError(message);
-        setStatus('error');
+        setStatus("error");
       }
     })();
 
     return () => ac.abort();
-  }, [gatewayUrl, contentType, contentId, authToken]);
+  }, [gatewayUrl, contentId, authToken]);
 
   return { endpoints, status, error };
 }
 
 export default useViewerEndpoints;
-

package/src/index.tsx

@@ -5,48 +5,56 @@
  */
 
 // Main player component
-export { default as Player } from './components/Player';
-export { default as PlayerControls } from './components/PlayerControls';
+export { default as Player } from "./components/Player";
+export { default as PlayerControls } from "./components/PlayerControls";
 
 // Overlay components
-export { default as LoadingScreen } from './components/LoadingScreen';
-export { default as IdleScreen } from './components/IdleScreen';
-export { default as ThumbnailOverlay } from './components/ThumbnailOverlay';
-export { default as TitleOverlay } from './components/TitleOverlay';
-export { default as StreamStateOverlay } from './components/StreamStateOverlay';
-export { default as StatsPanel } from './components/StatsPanel';
-export { default as DevModePanel } from './components/DevModePanel';
-export { default as PlayerErrorBoundary } from './components/PlayerErrorBoundary';
+export { default as LoadingScreen } from "./components/LoadingScreen";
+export { default as IdleScreen } from "./components/IdleScreen";
+export { default as ThumbnailOverlay } from "./components/ThumbnailOverlay";
+export { default as TitleOverlay } from "./components/TitleOverlay";
+export { default as StreamStateOverlay } from "./components/StreamStateOverlay";
+export { default as StatsPanel } from "./components/StatsPanel";
+export { default as DevModePanel } from "./components/DevModePanel";
+export { default as PlayerErrorBoundary } from "./components/PlayerErrorBoundary";
 
 // Icon components
-export * from './components/Icons';
+export * from "./components/Icons";
 
 // UI primitives
-export { Button } from './ui/button';
-export { Badge } from './ui/badge';
-export { Slider } from './ui/slider';
+export { Button } from "./ui/button";
+export { Badge } from "./ui/badge";
+export { Slider } from "./ui/slider";
 
 // Context
-export { PlayerProvider, usePlayerContext, usePlayerContextOptional, PlayerContext } from './context/PlayerContext';
-export type { PlayerContextValue } from './context/PlayerContext';
+export {
+  PlayerProvider,
+  usePlayerContext,
+  usePlayerContextOptional,
+  PlayerContext,
+} from "./context/PlayerContext";
+export type { PlayerContextValue } from "./context/PlayerContext";
 
 // Hooks
-export { useStreamState } from './hooks/useStreamState';
-export { usePlaybackQuality } from './hooks/usePlaybackQuality';
-export { useViewerEndpoints } from './hooks/useViewerEndpoints';
-export { useMetaTrack } from './hooks/useMetaTrack';
-export { useTelemetry } from './hooks/useTelemetry';
-export { usePlayerSelection } from './hooks/usePlayerSelection';
-export type { UsePlayerSelectionOptions, UsePlayerSelectionReturn } from './hooks/usePlayerSelection';
-export { usePlayerController } from './hooks/usePlayerController';
+export { useStreamState } from "./hooks/useStreamState";
+export { usePlaybackQuality } from "./hooks/usePlaybackQuality";
+export { useViewerEndpoints } from "./hooks/useViewerEndpoints";
+export { useMetaTrack } from "./hooks/useMetaTrack";
+export { useTelemetry } from "./hooks/useTelemetry";
+export { usePlayerSelection } from "./hooks/usePlayerSelection";
+export type {
+  UsePlayerSelectionOptions,
+  UsePlayerSelectionReturn,
+} from "./hooks/usePlayerSelection";
+export { usePlayerController } from "./hooks/usePlayerController";
 export type {
   UsePlayerControllerConfig,
   UsePlayerControllerReturn,
   PlayerControllerState,
-} from './hooks/usePlayerController';
+} from "./hooks/usePlayerController";
 
 // Types
-export * from './types';
+export * from "./types";
 
 // Re-export commonly used core items
 export {
@@ -57,7 +65,7 @@ export {
   StreamStateClient,
   QualityMonitor,
   cn,
-} from '@livepeer-frameworks/player-core';
+} from "@livepeer-frameworks/player-core";
 
 export type {
   PlayerState,
@@ -72,4 +80,4 @@ export type {
   PlayerSelection,
   PlayerCombination,
   PlayerManagerEvents,
-} from '@livepeer-frameworks/player-core';
+} from "@livepeer-frameworks/player-core";

package/src/types.ts

@@ -1,23 +1,23 @@
 /**
  * React-specific types for FrameWorks player
  */
-import type React from 'react';
-import type { 
-  PlayerOptions, 
-  PlayerState, 
-  PlayerStateContext, 
+import type React from "react";
+import type {
+  PlayerOptions,
+  PlayerState,
+  PlayerStateContext,
   ContentEndpoints,
   MetaTrackSubscription,
   PlaybackQuality,
   QualityThresholds,
-  ContentType
-} from '@livepeer-frameworks/player-core';
+  ContentType,
+} from "@livepeer-frameworks/player-core";
 
 export interface PlayerProps {
   /** Content identifier or stream name */
   contentId: string;
   /** Content type */
-  contentType: ContentType;
+  contentType?: ContentType;
   /** Pre-resolved endpoints/capabilities from Gateway/Foghorn */
   endpoints?: ContentEndpoints;
   /** Optional thumbnail/poster image */
@@ -132,4 +132,4 @@ export type {
   StreamStatus,
   EndpointInfo,
   ContentMetadata,
-} from '@livepeer-frameworks/player-core';
+} from "@livepeer-frameworks/player-core";

package/src/ui/badge.tsx

@@ -9,16 +9,17 @@ const badgeVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        outline: "border-border text-foreground"
-      }
+        outline: "border-border text-foreground",
+      },
     },
     defaultVariants: {
-      variant: "default"
-    }
+      variant: "default",
+    },
   }
 );
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;

package/src/ui/button.tsx

@@ -14,32 +14,33 @@ const buttonVariants = cva(
         outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         subtle: "bg-muted text-muted-foreground hover:bg-muted/80",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
+        icon: "h-9 w-9",
+      },
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
-    }
+      size: "default",
+    },
   }
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
   }
 );
 Button.displayName = "Button";