chore: rename skins, minor style tweaks (#61)

examples/react-demo/src/skins/frosted/FrostedSkin.tsx

@@ -29,7 +29,7 @@ type SkinProps = PropsWithChildren<{
   className?: string;
 }>;
 
-export default function MediaSkinDefault({ children, className = '' }: SkinProps): JSX.Element {
+export default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {
   return (
     <MediaContainer className={`${styles.MediaContainer} ${className}`}>
       {children}

examples/react-demo/src/skins/frosted/styles.ts

@@ -1,4 +1,4 @@
-import type { MediaDefaultSkinStyles } from './types';
+import type { FrostedSkinStyles } from './types';
 
 // NOTE: Removing import to sidestep for compiler complexity (CJP)
 // import { cn } from '../../utils/cn';
@@ -9,7 +9,7 @@ function cn(...classes: (string | undefined)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-const styles: MediaDefaultSkinStyles = {
+const styles: FrostedSkinStyles = {
   MediaContainer: cn(
     'relative @container/root group/root overflow-clip',
     // Base typography

examples/react-demo/src/skins/frosted/types.ts

@@ -1,4 +1,4 @@
-export interface MediaDefaultSkinStyles {
+export interface FrostedSkinStyles {
   readonly MediaContainer: string;
   readonly Overlay: string;
   readonly Controls: string;

examples/react-demo/src/skins/minimal/MinimalSkin.tsx

@@ -26,7 +26,7 @@ type SkinProps = PropsWithChildren<{
   className?: string;
 }>;
 
-export default function MediaSkinToasted({ children, className = '' }: SkinProps): JSX.Element {
+export default function MinimalSkin({ children, className = '' }: SkinProps): JSX.Element {
   return (
     <MediaContainer className={`${styles.MediaContainer} ${className}`}>
       {children}

examples/react-demo/src/skins/minimal/styles.ts

@@ -1,4 +1,4 @@
-import type { MediaToastedSkinStyles } from './types';
+import type { MinimalSkinStyles } from './types';
 
 // NOTE: Removing import to sidestep for compiler complexity (CJP)
 // import { cn } from '../../utils/cn';
@@ -9,7 +9,7 @@ function cn(...classes: (string | undefined)[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-const styles: MediaToastedSkinStyles = {
+const styles: MinimalSkinStyles = {
   MediaContainer: cn(
     'relative @container/root group/root overflow-clip bg-black',
     // Base typography

examples/react-demo/src/skins/minimal/types.ts

@@ -1,4 +1,4 @@
-export interface MediaToastedSkinStyles {
+export interface MinimalSkinStyles {
   readonly MediaContainer: string;
   readonly Overlay: string;
   readonly Controls: string;

examples/react-demo/src/skins/toasted/index.ts

@@ -1 +0,0 @@
-export { default as MediaSkinToasted } from './MediaSkinToasted';