refactor(compiler)!: move component generation to core

packages/react/src/presets/audio/skin.tailwind.tsx

@@ -1,16 +1,17 @@
 import {
   button,
   buttonGroup,
+  container,
   controls,
   error,
   icon,
   iconContainer,
   iconFlipped,
-  iconState,
   menu,
+  muteIcon,
   playbackRate,
+  playIcon,
   popup,
-  root,
   seek,
   slider,
   time,
@@ -99,10 +100,10 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={iconState.mute.button} render={<Button />}>
-      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
-      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
-      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+    <MuteButton className={muteIcon.button} render={<Button />}>
+      <VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
+      <VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
+      <VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
     </MuteButton>
   );
 
@@ -161,7 +162,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
   const { children, className, ...rest } = props;
 
   return (
-    <Container className={cn(root, className)} {...rest}>
+    <Container className={cn(container, className)} {...rest}>
       {children}
 
       <ErrorDialog.Root>
@@ -184,10 +185,10 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
-                  <PlayButton className={iconState.play.button} render={<Button />}>
-                    <RestartIcon className={cn(icon, iconState.play.restart)} />
-                    <PlayIcon className={cn(icon, iconState.play.play)} />
-                    <PauseIcon className={cn(icon, iconState.play.pause)} />
+                  <PlayButton className={playIcon.button} render={<Button />}>
+                    <RestartIcon className={cn(icon, playIcon.restart)} />
+                    <PlayIcon className={cn(icon, playIcon.play)} />
+                    <PauseIcon className={cn(icon, playIcon.pause)} />
                   </PlayButton>
                 }
               />