I fixed some issues with how we were setting up styles. should be consistent now

src/lib/hooks/context/use-theme.tsx

@@ -1,40 +1,51 @@
 'use client';
-import * as React from 'react';
+import {
+  useEffect,
+  useState,
+  type ComponentProps,
+} from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui';
+import { cn } from '@/lib/utils';
 
 const ThemeProvider = ({
   children,
   ...props
-}: React.ComponentProps<typeof NextThemesProvider>) => {
-  const [mounted, setMounted] = React.useState(false);
+}: ComponentProps<typeof NextThemesProvider>) => {
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true) }, []);
 
   if (!mounted) return null;
-
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 };
 
-type ThemeToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type ThemeToggleProps = {
   size?: number;
+  buttonClassName?: ComponentProps<typeof Button>['className'];
+  buttonProps?: Omit<ComponentProps<typeof Button>, 'className' | 'onClick'>;
 };
 
-const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
+const ThemeToggle = ({
+  size = 1,
+  buttonClassName,
+  buttonProps = {
+    variant: 'outline',
+    size: 'icon',
+  },
+}: ThemeToggleProps) => {
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true) }, []);
 
   if (!mounted) {
     return (
-      <Button variant='outline' size='icon' {...props}>
+      <Button className={buttonClassName} {...buttonProps}>
         <span style={{ height: `${size}rem`, width: `${size}rem` }} />
       </Button>
     );
@@ -47,11 +58,9 @@ const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
 
   return (
     <Button
-      variant='outline'
-      size='icon'
-      className='cursor-pointer'
+      className={cn('cursor-pointer', buttonClassName)}
       onClick={toggleTheme}
-      {...props}
+      {...buttonProps}
     >
       <Sun
         style={{ height: `${size}rem`, width: `${size}rem` }}
@@ -61,7 +70,6 @@ const ThemeToggle = ({ size = 1, ...props }: ThemeToggleProps) => {
         style={{ height: `${size}rem`, width: `${size}rem` }}
         className='absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100'
       />
-      <span className='sr-only'>Toggle theme</span>
     </Button>
   );
 };

src/lib/hooks/context/use-tv-mode.tsx

@@ -2,9 +2,9 @@
 import Image from 'next/image';
 import React, { createContext, useContext, useState } from 'react';
 import type { ReactNode } from 'react';
-import { Button, type buttonVariants } from '@/components/ui';
+import { Button } from '@/components/ui';
 import { type ComponentProps } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 
 type TVModeContextProps = {
   tvMode: boolean;
@@ -12,11 +12,9 @@ type TVModeContextProps = {
 };
 
 type TVToggleProps = {
-  className?: ComponentProps<'button'>['className'];
-  buttonSize?: VariantProps<typeof buttonVariants>['size'];
-  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
-  imageWidth?: number;
-  imageHeight?: number;
+  buttonClassName?: ComponentProps<typeof Button>['className'];
+  buttonProps?: Omit<ComponentProps<typeof Button>, 'className'>;
+  size: number;
 };
 
 const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);
@@ -42,33 +40,33 @@ const useTVMode = () => {
 };
 
 const TVToggle = ({
-  className = 'my-auto cursor-pointer',
-  buttonSize = 'default',
-  buttonVariant = 'link',
-  imageWidth = 25,
-  imageHeight = 25,
+  buttonClassName,
+  buttonProps = {
+    variant: 'outline',
+    size: 'default',
+  },
+  size = 25,
 }: TVToggleProps) => {
   const { tvMode, toggleTVMode } = useTVMode();
   return (
     <Button
       onClick={toggleTVMode}
-      className={className}
-      size={buttonSize}
-      variant={buttonVariant}
+      className={cn('my-auto cursor-pointer', buttonClassName)}
+      {...buttonProps}
     >
       {tvMode ? (
         <Image
           src='/icons/tv/exit.svg'
           alt='Exit TV Mode'
-          width={imageWidth}
-          height={imageHeight}
+          width={size}
+          height={size}
         />
       ) : (
         <Image
           src='/icons/tv/enter.svg'
-          alt='Exit TV Mode'
-          width={imageWidth}
-          height={imageHeight}
+          alt='Enter TV Mode'
+          width={size}
+          height={size}
         />
       )}
     </Button>